Smart Application Forms

 

 

 

What is the "Smart Application Form" ?

 

Smart Application Form (SAF) is a feature-rich business application form with great User Experience (UX).

 

 

All application forms in Codeless Platform by default have a rich set of features and at the same time are user-oriented, simple and easy to use.

 

    All Smart Application Forms in Codeless Platform have the following features:

 

• Users are able to customize how error messages are presented

• Users are able to choose what main actions on the form should be confirmed

• Users have a full real-time overview of all current changes on the form data

• Users have a full real-time overview of all errors on the current form

• Toolbars can predict what actions are most needed by the user depending on the content

• Users have a clear visual representation of unchanged, added and modified data in grid view

• Users have a clear visual representation of valid and invalid data in grid view

• Users are able to see the same data in different types of view.

• Users are able to easily find the data by combining filters with AND and OR operations. Filters use UX design to help the user to know what filters are applied, what data has to be filled, what to do when the query returns no records etc.

• Grid columns can be reorderable, resizeable, hideable, frozen and with custom rendering

• When a table has a large amount of data, a form can be pageable

• If the data is reorderable, the user is able to simply drag & drop rows in grid view

• If the data is hierarchical, the user is able to build a hierarchy with drag & drop in tree grid view

• Users are able to export data to PDF or Excel

• Users are able to upload their own Word template and use the report immediately.

• Users are able to choose the format (PDF, Word or Excel) of their report.

• Users are able to copy data (entity instance) together with all nested children data

• All application forms are responsive and easy to use on any device

• Form captions can be used as rich breadcrumbs navigators

 

 

 

User preferences

 

Users of Codeless Platform can configure thebehavior of the platform for themselves. User preferences can be accessed by clicking on the user's image and then option ”Preferences”:

 

 Confirmation of actions

 

As shown in the above image, users can instruct the platform to always ask to confirm DELETE, CANCEL and COPY operation.

 

Example confirmation message looks like this:

 

Showing or hiding error messages

 

If a “Show error messages” is checked it means that in case of any error on editing fields, the error message will be shown below invalid field.

 

When “Show error messages” is not checked, an error message is shown in a tooltip:

 

 

 

When “Show error messages” is checked, an error message is shown below invalid field:

 

 

Showing or hiding footer

 

The show footer option controls thevisibility of the footer.

 

Footer is a horizontal command bar that is shown on the bottom of the screen.

 

 

 

Platform mode

 

On the left side of the footer you can see information about the platform mode: production or development.

On the right side you can see tree commands.

 

Edit form

 

When you click the Edit command:



Form Designer will open to edit the current form.

 

For example if we are on the “Security Role” form:

 

 

Clicking on the Edit command, Form Designer will open to edit “Security Role” form:

 

 

  

Errors report

 

Errors report command



will show all current errors during editing data:

 

 

 

Note that, Errors report shows errors on all instances (in this case User logins) not only on currently selected.

 

Updates report

 

Updates report command



will show all current updates on your form:

 

Updates report will show you all currently added, deleted and updated instances.

This report is very useful especially if you are editing multiple instances and also to be sure what will be deleted.

 

You can control how detailed report should be by checking show details for added, removed or modified instances:

 

Smart toolbars

 

Toolbars in Codeless Platform are not static buttons that are fixed and visible all the time on the screen. Which commands will be main commands or secondary commands shown in the actions list depends on the context. The toolbar is smart enough to predict which commands are the most probable to be used by the user in which situation and to offer them as main commands, and to “hide” the rest in the actions list.

 

For example, if the user is viewing data in Grid view, the most probable actions are Add and Delete. If a user changes the view to Detail, the most probable actions are Update and Add because it means that the user found an instance, he is looking at the details and probably he wants to edit data. When the user enters editing mode by clicking on Add, this command should stay in the list of main commands as the user will probably want to add more instances before saving the data.

 

In addition, the tollbar can add additional commands when appropriate, for example Save and Cancel commands in the child window during editing so that the user does not have to close the window to be able to save the changes.

 

The toolbar is also smart enough to know if the Add command should work as a simple add instance or it should start the Checker view. Checker view is explained in Form Designer

 

Every toolbar consists of main commands that are in focus i.e. shown as buttons, other commands shown in the actions list and optionally custom buttons.

 

The content of the main commands and actions list depends on several factors. The following rules are applied:

 

• If the form is in Detail view, the main commands for View mode are: Update and Add.

• If the form is in Grid or Gallery mode, the main commands for View mode are: Add and Delete

• If Add, Update or Delete are clicked, form mode is changing from View to Edit.

• In Edit mode main commands are: Save, Cancel and the command that activated Edit mode: Add or Delete

• If Update command activated Edit mode, main commands will be only Save and Cancel

• If there is no data in the database for the current form, the toolbar will show only the “Load” command

• If filters are causing that no data is returned, the toolbar will show the “Clear filters” command

• If any data is invalid during editing, Add command will be disabled

• Toolbar commands are security sensitive and will show only if the user has appropriate permissions

• Commands Copy, Reports, any Export or Import are enabled only in View mode

• Custom commands are placed in a separate group from main commands and the logic of showing or hiding them can be controlled from code.

• When editing some child instance in a window, the user can Save or Cancel on that window, he does not have to close the window and then click on Save or Cancel.

• If the child form has a lookup field configured as a checker, Add command on the child form will start the checker view instead of showing the detail of a child view.

 

UX colors representing the state of data

 

Using colors to visually make distinctions in the state of data is very important when a user is viewing a collection of data like in Grid view. Codeless Platform is using the following colors:

Red color (invalid)

The red color is associated with danger. The Platform is using this color to represent invalid data.

 

Green (new)

The green color is associated with success. The Platform is using this color to represent successfully filled new data.

Blue color (update)

 

The blue color is associated with communication. The Platform is using this color to represent changes in data.

 

Viewing the same data from a different perspective

 

 

Every form in Codeless Platform can have Detail, Grid and Gallery view. Switching view type is done by clicking on icons that represent each view:

 

Detail view
Grid view  Gallery view    

UX Filters

 

Every form in Cordless Platform can have multiple filters. You can set a default filter that will appear by default. You can even set them mandatory i.e. a user will have to fill them before fetch is done.

 

Filters are data type sensitive. For example if you are filtering something by O2O/M2O relation filter field will be Lookup or Relation field. For each type of data you will get appropriate operations.

 

UX for filtering data means using different colors and language to explain what filters have been applied.

 

Each filter state has its own color, when color is white it means that filter is not set, blue color means it’s set, red color means that filter has to be set.

 

 

Empty filter:

Filled filter:

Mandatory filter not filled:

Mandatory filter filled:

 

 

 

Example OR operation:

 

 

The same filter applied:

 

 

 

Example AND operation:

 

 

The filter above is: Type is not hamster AND Owner is Bird Lover

 

Note from the example above that a simple and clear sentence is used to describe a filter: “Type is not a hamster”.

This is used instead of : “Type is not equal to hamster” or “Type is <> hamster” or “Type is != hamster.

Each description is simple and clear, users have to clearly see what filter is applied on the first look.

Like everything else in Codeless Platform, operations are also translated.

 

Combining AND / OR :

 

 

The filter above is: ( Type is hamster OR Type is a snake ) AND ( Owner is Bird Lover )

 

 

Updating filter:

 

When there is a filter like this applied:

 

 

By clicking on the filter icon (white icon on green background), the filter editor will show to change the filter:
 

 

 

Reordering with drag & drop

 

If the data is reorderable, the user is able to simply drag & drop rows in grid view:

 

 

 

Building a hierarchy with drag & drop

 

If the data is hierarchical, the user is able to build a hierarchy with drag & drop in tree grid view:

 

  

 

Exporting and Importing data

 

Every form in the Codeless Platform has the possibility to export collections of data in MS Excel or Adobe Pdf format.

Data can also be exported or imported from YAML format. This gives you an opportunity to migrate your data from one database to another.

 

Export to Excel

 

Export to Pdf   

Export data (YAML)

 

Import data (YAML)

 

Word templates

 

Word templates are a very powerful feature of Codeless Platform. The main use of Word templates are in companies standard documents, where the design of the document is fixed (company logo, fonts, colors etc.), the content is mostly fixed and some values in the document can vary like the name of an employee, job position of an employee, current date etc.

 

It’s very easy to use so that the end-users with no technical knowledge can make templates for themselves.

 

The template is a standard docx file with special mappings described below.

 

Note that mappings can be part of any paragraph inside the body, footer, header or table. Images can also be mapped and stored anywhere including the header and footer. All styles applied to mappings are preserved during the replacement of the mappings with corresponding values from the database or code.

 

 

#propertyName#

 

The mapping of property values is done with # between property names. When you want to use O2O/M2O relations, type . (dot)

 

Example for a form with entity Employee:

 

#firstName#	employees first name
#jobPosition.name#	employee job position name

 

You can insert any image (or copy from examples), and then set mapping in the description field of an image:

 

 

Note: the example above is from LibreOffice.

 

#[format]propertyName#

 

propertyName data type	format value
Date/Time/DateTime	FULL, LONG, MEDIUM, SHORT, pattern
Decimal/Double	FORMAT_NUMBER_DEFAULT
	FORMAT_NUMBER_INTEGER
	FORMAT_NUMBER_CURRENCY
	FORMAT_NUMBER_DECIMAL
	FORMAT_NUMBER_PERCENT
	FORMAT_NUMBER_SCIENTIFIC
	pattern

 

Examples for form with entity Pet:

 

#[SHORT]birthDate#

#[dd.MM.yyy]birthDate#

 

 

Mapping Children

 

You can map O2M relations as easily as you map O2O/M2O relations. For M2O relation you should place mapping inside the table:

 

Header

#o2mRelationName.propertyName#

 

Examples for form with entity Vet:

 

Specialties

#vetSpecialties.specialty.name#

 

Note: Vet entity has O2M relation called: vetSpecialties that has M2O relation to entity Specialty.

 

For details about the PetClinic model, please read Pet Clinic Tutorial

 

How to use templates once you create one:

 
Let's imagine you wrote the template called Vet.docx for the form Vet. You would like to see the first name, last name and specialties of a selected vet:

The content can be something like this:

 

#firstName# #lastName#

 

Specialties

#vetSpecialties.specialty.name#

 

1. Go to the Vet form that will provide the data for your template. Select Actions > Reports:

 

2. To add a new template click on the cogs icon in the header:

 

 

3. Click Add:

 

 

4. Upload your template Vet.docx, close the window and you should see your template listed in available reports:
    

  

5. Click on Generate and you will get your report for the selected vet:

   

Example test word template with images in header, footer and table:

 

 

 

 

#USER_LOGIN_NAME#

 

USER_LOGIN_NAME will be replaced with currently logged user

 

 

#COMPANY_NAME#

 

COMPANY_NAME will be replaced with your company name.

 

 

#COMPANY_LOGO#

 

COMPANY_LOGO will be replaced with your company logo image.

 

 

#[format]TODAY#

 

TODAY will be replaced with the current date. You can apply any format explained earlier.

 

Example:

#[dd.MM.yyyy]TODAY#

#[format]NOW#

 

NOW will be replaced with the current date-time. You can apply any format explained earlier.

Example:

#[hh.mm]NOW#

#custom#

 

You can set anything from code, please refer to Reports in Developers Handbook.doc 

 

 

Report formats

 

When you use Jasper for your reporting, the default format is PDF. In Codeless Platform you can choose also to see the same report in Word and Excel format. If you want to choose a format make sure that the “Choose format” option is selected otherwise you will automatically get PDF format.

 

If you open the form that has jasper report, select one of Jasper reports and click generate:

You will get the following screen to choose the format:

 

    

 

The end result will be one of the following:

 

   

Copying data

 

Every form in Codeless Platform has a Copy command that will copy the currently selected data instance (entity) with all relations including child relations. The platform will check if the primary key is String and ask you to specify a unique value like shown below:

 

When you enter a unique value, the dialog will change to:

 

Example of copying entity with children:

 

In this example we will copy an existing vet with his specialties and then by changing the first and last name create a new vet.

 

Open existing vet:

 

Go to Actions > Copy

 

 

Change the first name to something else and save the changes:

 

You can see that the vet copy (Super Man) has specialties like the original one (Spiderman)

 

  

Responsiveness

 

 

In Codeless Platform all application forms are responsive. There is nothing special you need to do in order to make your form responsive.

 

Desktop:

 

 

Tablet:

 

 

 

 

Mobile:

 
 

Rich breadcrumbs navigation

 

Every form in Codeless Platform can have rich breadcrumb navigation.

 

Why “rich” ?

 

The standard breadcrumb will allow you only to jump into the level you clicked. It usually looks something like this:

 

Master > ChildLevel1 > ChildLevel11

 

In Codeless Platform you can turn your caption into a breadcrumb that looks like this:

 

 

Explanation: User “Steve Jobs” security role “ADMIN” is viewed.

 

Rich breadcrumbs can show images, jump to the place you want, change the type of view and navigate to different instances inside the same level and.

 

All blue colored text in the above image can be clicked plus image can be clicked as well

 

• If “Users” clicked, the Platform will show the list of all users and the breadcrumb will look like this:

 

 

• If the image is clicked, we are focusing on the user “Steve Jobs”, and from there we can go to “Applications”, “Roles” or “Permissions”:

 

 

• If “<” ( “> ) ”is clicked, the previous ( next ) user will be shown. The second level will not change, it will show the role of the selected user:

 

 

• If “Role” is clicked, all roles for user “Steve Jobs” will be shown:

 

 

This works with any number of children and any number of hierarchy levels.

 

Note that the first (master) level is collared with blue color (left border), next is green, then red etc depending on the level.