Screen Designer

Designer Layout

Here you design your screens, display items, variables, expressions, and events. You can enter screen designer only if your app has at least one screen.

  • Screen Design Canvas: here is the canvas in which you create screen design.
  • Design Mode: Helps examining entities and entity hierarchies on the canvas more comfortably.
  • Display Item: Every item draggable to canvas are display items.
  • Toolbox: The toolbox contains various entities that you can drop to the canvas. The entities are classified as following:
  • Domain Entities: A domain entity represents any object in your domain. A domain entity can represent a global object such as Photo, or it can represent a domain-specific one. For example let’s say your domain is “School”, then a domain entity might represent a “Student”, a “Lecturer”, a “School Bus Driver”.
  • Interface Entities: Those are the entities that do not need a table in your database. You can use them to represent some third party entity and its data.
  • Basic Entities: A basic entity is part of the basic components library. For example: String, Boolean, Guid, DateTimeOffset.
  • Widget Toolbox: A widget is an entity that undertakes a function. For example: Button, Location, Barcode Scanner.
  • Layout Options: Those are templates that you can use to enrich user interface capabilities. For example: Two column Layout, Row Flex, Header, Footer.

 

Simply, all toolbox items become display items when dropped into the canvas.

 

  • Display Item Dialog Box: You use it to set properties of the display item you are about to drop; the properties such as its Action and Renderer.
  • Action: you can determine the use of the display item by specifying an action. Action types are:
  • Display: You choose Display action when you want the display item to simply display data.

For example when you drop a Photo and choose Display as a related action, it will be resulted in a fixed photo that is displayed and cannot be modified.

  • SelectYou choose Select action if you want to use the display item as a list of entities of that kind.  

For example when you drop a Photo and choose Select action, it will be reflected to your running app: A list of Photos in that user can choose one among them.

  • Input: You choose Input action if you want to enable user to bind data to the display item externally.

For example if you drop a Photo and choose Input action, that enables user to upload a photo.

  • Edit: You choose Edit action if you want to enable user to edit a record in the database of the domain.

 

  • Renderer: you can determine how your display item will be rendered by specifying renderer.

A Renderer might not be compatible with every Action. So after specifying an Action, you can choose only the Renderers compatible with that Action.

For example if your action is Select, then compatible Renderers can only be Select Box, Selectable List, or Radio Button.

Some other renderers: Grid, FileDownload, Location, BarcodeScanner, CheckBox, TextArea…

  • Expression: An expression is a logical statement that you will need to write to design your screens. You should keep expressions in variables to be able to store and reuse. 

 

The expressions that Kuika offer are simple to use, yet the operations you can take via them are limitless. Some of them are:

  1. doing data binding
  2. calling a third part api and retrieve data
  3. adding functions and using them in your expressions. For example you can wrap some very complex algorithm within a function and simply call that wrapper function in your expressions.

 

  • Variable: Variables are core units you will need when designing your app. You will need to assign expressions to your variables and use the variables.

 

Variable types of display items: App variables, entity variables, validation variables

Variable types of events: Gate variables, input variables, output variables, navigation variables

Panels

Screen Properties Panel

You may edit a screen’s properties through this panel. You can:

  • Change name of the screen,  
  • Set the screen as the starting screen,
  • Add header and footer to the screen
  • Change stylings of the screen such as background color, text size and color etc.
  • Create expressions and validation variables.

By default, the first screen is set to be the starting screen of your app.

Display Item Properties Panel

You may edit properties of an entity on canvas through this panel. Monitoring various functions of an entity is done through this panel. You can rename a display item, modify a display item, add stylings, and assign expressions to variables of a display item.

A closer look to the entity properties panel:

  • Entity renaming panel: You can rename your entity via this section.
  • Modifying display item: You may modify a display item even after dropping it to the canvas. You will be redirected to the display item dialog box by clicking  “Modify Display Item” button.
  • Stylings: You may assign custom stylings to a display item such as background color, text color, font size, font weight, width and height of a display item.
  • Variables: A variable enables you to manage and control associated functionality or property of a display item.

For example you can set the text displayed on your label by using “Label_label” variable.

There are four types of variables, grouped by their functionalities (See Figure 13):

  • App Variables: An App Variable is reachable by all screens of your app. Initially four of the variables are app variables: CallbackUrl, CreatedAt, SubmittingKuickaIdentityId and WFIID. They are holding properties associated with the whole app. These three app variables are special to the app, they cannot be modified.
  • Entity Variables: An Entity Variable serves to hold and manage properties of the dropped entity. Unlike an App Variable, an Entity Variable is accessible only within the screen in which the display item is dropped. Label,  enabled and visible variables are common to all dropped entities. Also, there may be entity variables  specific to a dropped entity as well. For instance, Photo has entity variables such as Filename, Format, Imagedata.

You can promote an Entity Variable to be an App Variable. You can also demote an Entity Variable from being an App Variable.

 

Designate

Display Select Input

Edit

initial

name_in name_in name_in name_in
output name_selected nam_out name_out
selectby name_selectby
initialselection name_initialselection
label name_label name_label name_label name_label
enabled name_enabled name_enabled name_enabled

name_enabled

 

Domain entities have six main entity variables. Variables label and enabled are common to all domain entities. Other entity variables are dependant on the action type.

From the table above, you can see variable types (1st column) and their corresponding variable names per action.

Initial variable keeps the data to be shown when app screen is first loaded.

Output variable keeps data coming as a result of user action select, input or edit.

Selectby variable tells which field of the entity will appear as options list.

Initialselection variable can be used to display initially selected data, to be seen when app screen is opened.

Note that initial and initialselection variable serve for different purposes. For example in a scenario where you select a location from among several locations in a map, you can keep locations list in initial variable, and keep an initially selected location in initialselection variable. If user selects a location, that selected location data is stored in output variable.

  • Events: Each display item has an events list which serves to bind actions to display items.

For example a button can trigger an event via actions such as Button Click, Double Click, Mouse Down, or Mouse Enter etc.

Or a File can have File Initialisation event, to be run every time a File entity is initialised.

  • Event Gate Variables: You can set gate variables to do validations before event call of the button.

Those are a couple of variables called:

  • Gate: In which you can store a validation expression.
  • Gate_Message: It shows up on the screen of your app if Gate validation does not succeed.

For instance, in case your button-click event uses a variable, you may want to check whether that variable has an expression at the time your button is clicked. In such a case you can use Gate Variables to assure dependant data is handled.

  • Other Variables: In case you need to keep and use any kind of information about your display item, you may create a new variable. You can do it either via Entity Properties panel of your display item, or via Screen Properties panel. The variable will be accessible within the scope of the screen, in which your display item is dropped.
  • Validation Variables: You can create validation variables to make form validation in your app. Validation variables are used as pairs: isvalid (Boolean) and invalidmessage (String):

Kuika Entity Properties Panel Validation Vars Section

  • isvalid: Right side of the expression determines whether the validation is satisfied.
  • invalidmessage: This variable stores the message to be shown if validation fails, namely, if isvalid is false.

Event Binding Panel

An event is an action which is activated through a button click. An event can;

  • Close a screen,
  • Finish a workflow step,
  • Load a desired screen (navigation)

 

Navigation event is different than the other two events. If your screen navigates to another screen, it simply opens the screen to be navigated, without moving to the next workflow step. It is as if you are branching out on the same workflow step. When you close the navigated screen, you will be redirected to the previous screen.

You may assign a function to a button through event binding panel. You can pick events that you want to bind to your button among the options below:

  • This event closes screen.

If you pick this option the button-click event will close the screen.

  • This event finishes the workflow step.

If you pick this option the button-click event will finish the workflow step, advancing to the next step in the workflow.

  • This event loads the desired screen.

If you pick this option the button-click event will navigate to the next screen.

Event Properties Panel

Once you selected an event, you can set variables related to that event in Event Properties panel.

For the events other than navigation event, you can set:

  • Gate Variables: You can set gate variables to do validations before event call of the button. Those are a couple of variables called:
  • Gate: In which you can store a validation expression.
  • Gate_Message: It shows up on the screen of your app if Gate validation does not succeed.

 

For instance, in case your button-click event uses a variable, you may want to check whether that variable has an expression at the time your button is clicked. In such a case you can use Gate Variables to assure dependent data is handled.

  • Pre Event Expressions: You can add a new expression to pre-code expressions of an event, to be run just before the button click event starts.
  • Post Event Expressions: You can add a new expression to post-code expressions of an event, to be run immediately after the button click event finishes.
  • Screen Variables: Those are the variables that you can set expressions upon, which are to be executed just before (Pre Event) or  immediately after (Post Event) button-click occurs.

 

For navigation events you can set:

  • Navigation Input Variables: You can make a variable an input variable in the navigated screen if you want to set the expression of this variable from the navigation source.
  • Navigation Output Variables: You can make a variable an output variable in the navigated screen if you want to use the expression of it from the navigation source.