SmartDevicesPlus hierarchical editor works for both "Panel for Smart Devices" and "Work With for Smart Devices" pattern.
This editor contains a tree view which combined with GeneXus default layout editor provides several new functionalities.
In this section we describe some of the funcionalities available in the editor's tree view.
With this option you can change the applied template for the layout:
This functionality allows user to add controls in the panel's layout in a simple way:
This functionality allows the user to move nodes directly in the hierarchical tree and see the change reflected in the layout.
For example we have the following "Panel for Smart Devices". When you move the textblock Filter1Text, the change is reflected in the layout:
Moving controls inside a table can be very difficult using the default layout editor. SmartDevicesPlus provides two mechanisms to simplify this task:
User can drag and drop any control inside a table using the mouse. Once the the control is dropped in the destination, SmartDevicesPlus will reorder the controls so that the dragged control is placed in the position where it was dropped, keeping the rest of the controls ordered as before.
In the following example, user wants to move the ProductPhotoH attribute up, so it becames the first attribute in the table.
Simply drag the ProductPhotoH attribute in the tree view, and drop it over the ProductId attribute.
Then, SmartDevicesPlus will rearrange the controls, producing the following outcome:
User can also reorder controls in a table using the keyboard.
For this, select the control that wants to be moved and press ctrl + UP to move the control up, and ctrl + DOWN to move the control down (UP and DOWN are the standard keyboard keys)
Using the keyboard allows user to move controls one position at a time.
SmartDevicesPlus editor allows the user to change the number of columns in a table, rearranging the content of the table according the the content and the new columns amount.
To change the number of columns in a table select the table in SmartDevicesPlus tree view editor. This will display a new property in GeneXus properties grid editor.
Change the value of the Number of columns property and then SmartDevicesPlus will automatically rearrange the controls.
In the following example, user wants to display the attributes using 2 columns instead of 1:
SmartDevicesPlus editor allow user to easily view and edit the width of the column and the height of the row that contains the selected control.
Row height can't be modified if control's Row Span property is greater than "1".
Column width can't be modified if control's Col Span property is greater than "1".
In the following example, user sets the "Row height" property to "35dip" to the ProductName attribute.
This will automatically change the height of the second row in ProductPrice parent table (SectionData1_1 )
SmartDevicesPlus Hierarchical Editor allows to define whether an attribute/variable will be visible or not:
When you define a Visible Condition, SmartDevicesPlus is going to automatically create a Sub called EvalVisibleConditons where every condition is verified:
You can call this Sub, for example, from the event “ControlValueChanged” or in any other event where you may need it.
In addition, SmartDevicesPlus sets the “Invisible Mode” of the control to “Collapse space” so the user won’t see “blank” spaces when the control is hidden:
SmartDevicesPlus Hierarchical Editor allows to define whether an attribute/variable will be mandatory or not:
When this property is set to “True”, SmartDevicesPlus is going to automatically create a Sub called CheckRequired where is verified if every required attribute was fulfilled by the user or not:
You should call this subroutine before saving data, for example:
In addition, SmartDevicesPlus sets the “Invite Message” of the so the user, in runtime, can visualize that the field is required:
The possibility to search within the items of the Hierarchical Editor was added.
By using this features will be able to easily find the controls and items of your layout and so edit them: