To Design the screen with the responsive screen

By | April 22, 2021

In latest version of the Sage X3 Patch 23, we have new feature of designing in the using the badge as shown below.

On every screen we have drop-down as shown below:

This will display the below page as below, this will hold the panel with the sections, block and the fields:

From this screen, we will be able to change the locations of the screens with the below steps:

On the left panel you will able to see each and every screen, blocks and the fields according to that we would be able to the change the dimensions.

Screens:

Initially we will start with the screen, where we have two different options to arrange the objects within the tabs and screen with the columns and stacked.

Column: In the column options, all the fields in that particular screen will be arranged in the column manner which are mentioned in the decimal as shown below.

Columns flag is “ON”, this would arrange the blocks in the below shown format.

If the column flag is “OFF”, the arrangement can be done in the below format. Where the Block in the screen will be displayed one after the other.

We have another option of the Stacked which have some different arrangement of the fields, in this option the field which are present in same line will align one below the other. On the one click all the fields which are having same line number will be brought one below the other.

As per below screenshot the arrangement of field is done on one below the other as shown below.

In case of the stacked in turn off it would bring the field as per mention in the screen master.

The same set of the Stacked and Column can also be implemented in the block level as shown below.

In this setup, we can implement column or Stacked entirely on the screen that is all the blocks mentioned in the screen will hold in the manner as mentioned in the screen. Hence there is no need to go on each block and apply this setup it would be implemented to all the blocks present in the screen.

In case if we need specific block to behave in different manner then the screen setup then we can make the flag change to arrange the objects in that manner.

Display mode:

There are two more option where we can hide the fields from screens using the badge as shown below.

We have option of hiding the field from the desktop mode and display in mobile mode. Or we have another option to hide from mobile mode and display in the Desktop mode.

We can hide from the both mode, desktop and mobile.

We have one more option to declare any field as last line on the screen. Hence if we click on the below option then all the remaining field would be shifted to next line.

The above process will help us to make the movement of field , hide and display of field as per the UI needed.