- Description
- How to use it
- 1. Responsive layouts
- 1.2 Field
- 1.3 Field Container
- 1.4 Examples
- 1.5 CLAPI
- 1.6 Recursive
Description
Responsiveness in our framework refers to its ability to adapt and swiftly respond to various devices and screen sizes. This feature ensures an optimal user experience across a range of viewports.
How to use it
1. Responsive layouts
AutoRepositionFieldOnVisiblityToggle Attribute When set to false, no auto reposition on show/hide of form fields will be done. In that case, functionality listed below should be used to manually reposition/resize fields in a form/form container.
AutoRepositionFieldOnVisiblityToggle is left as is (default: true), the old responsive handling still applies; this might cause unexpected issues as in the past. Kept to true for backwards compatibility.1.2 Field
Attribute | Parameters | Description | Validations |
setRowStart | (row: number) | sets the row start of the form field | if row < 1, then does nothing |
setColumnStart | (columnStart: number) | sets the column start of the form field | if column < 1 or the new column exeeds the max number of columns on the form, then do nothing |
setColumnEnd | (width: number) | sets the column end of the form field | if width < 1 then do nothing |
1.3 Field Container
Attribute | Parameters | Description | Validations |
setFormFieldRowStart | (fieldName: string, row: number) | finds the form field control based on the name and sets the row start of a given form field | same validations apply as for setRowStart |
setFormFieldColumnStart | (fieldName: string, columnStart: number) | finds the form field control based on the name and sets the column start of a given form field | same validations apply as for setColumnStart |
setFormFieldColumnEnd | (fieldName: string, width: number) | finds the form field control based on the name and sets the column end of a given form field; | same validations apply as for setColumnEnd |
shiftColumnsByOffset | (columnStart: number, columnOffset: number) | shifts all columns in a form field container by a given offset, starting from a given column; only works for form field container(form itself, block, fieldset) | if columnOffset = 0 or columnStart + columnOffset > total number of columns, then do nothing |
setColumns | (columnNumber: number) | sets the total number of columns in a given form field container; only works for form field container(form itself, block, fieldset) | if columnNumber < 1 then do nothing |
1.4 Examples
setColumns
akioma.swat.Root.getObject('SampleButtonLayoutForm').setColumns(3)
shiftColumnsByOffset
akioma.swat.Root.getObject('SampleButtonLayoutForm').shiftColumnsByOffset(2, 1)
setFormFieldRowStart
akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldColumnStart('integerInputLeft', 2)
setFormFieldColumnEnd
akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldColumnEnd('integerInputLeft', 2)
setFormFieldRowStart
akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldRowStart('integerInputLeft', 1)
Limitations
Due to the grid layout, the max row for which the layout will be adjusted is: max number of rows in the container + 1. Even if setting the row to 100, it will not position the field further than that.
akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldRowStart('integerInputLeft', 100)
For example it is possible to overlap columns when using shiftColumnsByOffset, or to overlap fields:
akioma.swat.Root.getObject('SampleButtonLayoutForm').shiftColumnsByOffset(2, -1)
akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldColumnEnd('integerInputLeft', 2)
1.5 CLAPI
Functionality is also available from CLAPI. Methods were introduced in their respective classes.
in CLAPI, the Form, Block and FieldSet have the Form field container functionality mentioned above.
Fields (either smart data fields, or data fields and buttons) have the Form field functionality
1.6 Recursive
All container/field functionality should work recursively. In the above form, ‘SimpleSwatInput2’ is located in a block. Any functionality from a Form is applicable in a Block or FieldSet inside the form.
The following are equivalent:
akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldColumnStart('SimpleSwatInput2', 2)akioma.swat.Root.getObject('SampleButtonLayoutForm').getFirstChildByType('block').setFormFieldColumnStart('SimpleSwatInput2', 2)Back to 
Documentation
Back to Home Page