top of page

Introduction to Application Studio



1. What is Application Studio?


Application Studio is the design environment for Kinetic key users, business analysts, or specific users who can configure applications and processes to fit their business.


Application Studio provides a low code/no-code environment, which gives you the ability to tailor your system with greater ease. Configurations created through Application Studio are designed to be much more resilient to upgrades, but you should keep in mind that you may still need to update/verify them after an upgrade. Well-designed application configurations can provide extra business value, and with the use of Application Studio to create these configurations, you will save time and money.


Application Studio customizations work by adding layers over the base application. When you open Application Studio, you land on a new layer and you need to either create a new, one or select an existing layer to be able to preview, save, or publish the modification. Once a layer has been created you will be able to apply modifications through the different designers:

Application Map


​This designer displays the hierarchy of an application in a map-like structure. You can use it to view and change the navigation of the application and connections within its levels - pages - and their details (for example, you can see which pages are the parent and which are the child ones, change the name and the caption of a page, add new pages, etc.).

​Layout


The Layout designer allows you to design the layout of an app page. Here you can drag and drop the components from the toolbar menu: text boxes, fields, columns, check boxes, etc. to create a page design that works best for you.

Data Rules


You can use Data Rules to manage the existing or create new rules for a component in an application. You need rules to define how the components function within the application. Each rule can have various data conditions and one or more actions that activate when the condition is met. Also, you can set up a rule to have no condition but still perform the required action.

Events


​The Events designer allows you to create an action that is triggered when a specific event occurs on a page. For example, you can create an event that in respond to an action displays a message box, clears the details from the page, runs a calculation on some data you enter, launches a URL, and so on. You can create as many events as you need. Also, the events list has system events that are already in the application, and you can use them as well.

Data Views


The Data View Designer provides a list of data views used by the application. A data view is a representation of data in the underlying dataset table (data table). Each data view is wired to a single data table. You can use Data View Designer to create user-defined representations of data for your modifications. You can edit existing data views in the application - add columns, edit static filters, tools, or parent-child relations - or add totally new views.

2. Components overview


The Kinetic Framework provides a set of predefined user interface (UI) components (or controls) that you can use to modify your applications. You can find them all on the Toolbox > Components tab. You first add a component - for example, a button, check box, or combo box, to a page layout. You then edit its properties to define its ID, data binding, behavior, look, etc.


2.1 Properties

  • Basic: Includes such unique component properties as ID, Title, or Label Text. As a rule, Basic properties are required.

  • Behavior: Includes the list of available hooks that you can use to quickly set up the component as an event trigger.

  • Data: Includes properties related to data binding - EpBinding.

  • Layout: Includes properties that impact component appearance, shape, etc.

  • State: Includes properties that define component state - Hidden, Disabled, ReadOnly, etc.

  • Advanced: Includes properties specific to each component type.


3. A few examples of components


  • Buttons: Buttons allow you to take action and make choices with a single click. Buttons may contain text or icons and come in multiple sizes and styles.

  • Check Boxes: A check box is a type of control that, by default, lets you choose between two opposite states, actions, or values. A check box is considered "selected" when it contains a checkmark and "cleared" when it's empty.

  • Combo Boxes: A combo box is a type of input field that includes a combination of a pick-list and a single-line editable Text Box allowing you to either directly type in a value or select one from the list.

  • Date Picker / Time Picker :

o Date Picker is a combination of a Date Input and a pop-up calendar graphic UI that allows you to select a date from a calendar.

o Time Picker is a special text box with an icon that allows the user to select a specific time to be entered using a mask into the text input area. The time picked can be considered to include hours, minutes, and seconds in any desired increments.

  • Grid / Panel Card Grid:

o Grid - An arrangement of data in rows and columns, or a more complex structure. Grids are often referred to as tables and are widely used in communicating tabular data or complex lists. The grid is driven by a model defined by the EpGridModel interface.

If you need to group several grids and probably other UI controls, like buttons, text boxes, etc. under one container component, take a standard Panel Card and just add anything you need to its body. Use the Grid component as a 'building block' to construct component groupings - for example, in Panel Cards.

o Panel Card Grid - A composite component that combines a standard Panel Card container-type component and a single grid. You cannot add other grids or components to the body of a Panel Card Grid. Use this component to display standalone grids.

  • GroupBox: GroupBox is an empty "container" component. You can place it onto a blank page and add other components to it. Unlike Panel Card, it doesn't have a header and toolbar.

  • Panel Card: A card is a container that helps chunk data/information into smaller more easily visible pieces. Cards can include any type of media and act only as a visual grouping or separating mechanism.

  • Radio Button: A Radio Button, sometimes called an option button, is a selector element that allows you to choose only one of a predefined set of mutually exclusive options. Radio Buttons can be oriented vertically or horizontally and may include any type of content as the selected value passing applicable data back to the system on submission.

  • Selection List: The selection list allows users to select and sort data.

  • Text Box: The text box is an input field that allows you to enter or edit alpha-numeric characters.


4. Tips & tricks


  • Whether you are interested in a particular field, check box, or program, use the Application Help that you launch from within Kinetic.

  • Press Ctrl+Alt + H (or Cmd+H for Mac) to launch the hotkeys panel. Review the list of global shortcuts available in Kinetic.


  • To enable debugging mode, open the developer console in your browser (Ctrl+Shift+I for Chrome) and click anywhere within Kinetic and press Ctrl+Alt+8 and you should see the following message:




留言

bottom of page