Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    Responsiveness

    Responsiveness

    • 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.

    icon
    None of this functionality will work if the form field is hidden.
    icon
    When the value of the new attribute 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)
    image

    shiftColumnsByOffset

    akioma.swat.Root.getObject('SampleButtonLayoutForm').shiftColumnsByOffset(2, 1)
    image

    setFormFieldRowStart

    akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldColumnStart('integerInputLeft', 2)
    image

    setFormFieldColumnEnd

    akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldColumnEnd('integerInputLeft', 2)
    image

    setFormFieldRowStart

    akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldRowStart('integerInputLeft', 1)
    image

    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)
    Max row is determined based on the total number of rows in a form.
    Max row is determined based on the total number of rows in a form.
    icon
    Developers should be careful when using any of this functionality, as it is possible to break the layout.

    For example it is possible to overlap columns when using shiftColumnsByOffset, or to overlap fields:

    akioma.swat.Root.getObject('SampleButtonLayoutForm').shiftColumnsByOffset(2, -1)
    Overlapping columns
    Overlapping columns
    akioma.swat.Root.getObject('SampleButtonLayoutForm').setFormFieldColumnEnd('integerInputLeft', 2)
    Overlapping fields
    Overlapping fields

    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 DocumentationDocumentation

    Back to Home Page

    Logo