TipoTapp makes the application very dynamic and powerful using simple JavaScript Expressions . It could be to automatically calculate and populate values when your app users are filling forms or to conditionally show certain parts of the screen. These expression can also be used to even style the application.
These expressions only control a single field, and hence they are provided at each field level. After adding a field to a tipo and choosing the field type, click on the expand arrow to expand the field and see all the properties of a field.
Use the arrows highlighted in the picture below to expand each field.
Once expanded, you'll be presented with the following tabbed window, where you'll be able to configure all the field level customisation.
Expression Scenarios
TipoTapp supports the following three types of UI expressions. Each expression is used in a specific scenario. All these expressions work in the browser and hence it is possible to refer to data in the forms to make these expressions extremely useful.
In order to refer to the data in the form or screen of a given object, or to refer to application level contextual data, use the system and application variables provided in this article Dynamic Expressions using $tipo...
Auto-Fill JS Expression
Lets consider Student tipo in School Management App. Student has the fields First Name and Last Name. If you were to automatically populate a field called Name that concatenates both first name and last name, you can enter the following expression against the Name field.
Expression : $tipo.first_name + ' ' + $tipo.last_name
Where : Expand the Name field in Student Tipo under the Advanced tab you'll find Auto-Fill JS Expression
The expression can be broken down below:
$tipo.first_name = references the value for the data in the First Name field
$tipo.last_name = references the value for the data in the Last Name field
+ = concatenates the first name to the last name with a space in between
Visibility Expression
Visibility expressions are similar to the Auto-Fill JS Expressions, but these evaluated to a boolean, and if result is true, the element which contains this expression will be rendered otherwise the UI element will be hidden from the user.
As shown in the image below, visibility expressions are captured under the Visibility tab. You can choose one of the pre-built example to understand how to structure your expression.
In order to refer to system variables and other fields in the Tipo, simply type $tipo and intellisense will offer code completion where possible.
To better explain visibility expression, let us consider a situation:
Problem: When a new student application is created using the Student tipo in the Student Management App , user is presented with Department and then Course to choose from. We want to have Course show only after a Department has been selected.
Solution: Open Student tipo and go into edit mode, expand Course field and select Visibility tab to enter the following expression:
($tipo.department)Thats all is required. The above condition will evaluate to true if the user has selected department otherwise false.
CSS Styles Expressions
TipoTapp allows you to set CSS styles for your field’s labels and values. This can be useful for instance, you want to color-code a particular field for easy identification. From the Advanced Editor of a field, down at the Display Settings section, you can either choose from an available selection of CSS styles or you can add your own custom styles. The custom fields support valid CSS e.g. {'border-bottom':'1px solid white'}.
By default, any style you set will be applied to all rows of your records, but you can also select to have different colors according to a certain condition. This is when a JavaScript expression in styling is useful.
Problem: For instance, suppose the School Management System had a field named Application Status in its ApplicationTipo . This field was to be used to indicate whether the student application is New,Approved,Rejected, In-Progress,
- Approved: The student's application is successful
- Rejected: The student is not accepted.
- Progress: The student application is being evaluated
- New: The student application is submitted but yet to be evaluated
Using a different color code for the different status would be helpful when scrolling a list of all student records.
Solution: Below is an example of a CSS style you can use to set different styles for different status.
($tipo.application_status === 'Approved' && {'background-color': '#852487','border-radius': '5px' ,'padding': '5px', 'color': 'white'}) || ($tipo.application_status === 'Progress' && {'background-color': '#e5d010','border-radius': '5px','padding': '5px', 'color': 'white' }) || ($tipo.application_status === 'Rejected' && {'background-color': '#accc2e','border-radius': '5px' ,'padding': '5px', 'color': 'white'})|| ($tipo.application_status === 'New' && {'background-color': '#accc3e','border-radius': '5px' ,'padding': '5px', 'color': 'white'}) 
Below you can see how the field of a student who is Approved would look like.
Comments
0 comments
Please sign in to leave a comment.