Designing apps- Container Widget

The container widget allows you to better organise your app space. It is a section with empty space in which all other sections can be placed and rearranged. The special feature of this section is that it can be 'hidden' from the app instance - just collapse it by clicking on the arrow.

Options of this section:

Caption - which can be both just given or computed by a formula

Initially collapsing - which can be set to be done automatically by clicking the 'initially collapsed' option

Hide header - you can choose if you want to hide header of container

Alignment - you can choose to what align the items in the container (Left, Center, Right)

 

The properties of this section are:

Name- the name of the section

Size - allows the user to freely define the height and width of the designed section

Visibility - allows you to add a formula to the section, the result of which will determine whether it will be displayed in the application instance

Hide mode - together with the visibility of the section determines how the section is hidden

Auto width: - enables to set the fixed size of the section in relation to the application screen

Caption- the name of the header

Alignment - allows you to select what the elements in the container should be aligned to (left, right, centered)

Header visibility: - you can choose from three options for header visibility: 'title and button', 'only title' and 'No header'. This allows you to decide whether you want to display both the header with a button to expand the section, just the section title alone without a button, or hide the section header altogether.

Initially collapsed - means that the container is closed by default when the instance is launched. This property allows you to set the container to be initially collapsed.

Resizable - determines whether the application user can change the width of the container

The option is only available when you select "title and button" in the header visibility settings.

Style - Container

Sekcja:

  • We can choose a style from the list or specify it using a formula.
  • Border settings:
    • Using the border options, we can set its parameters (top, bottom, left, and right) by selecting the appropriate color and rounded edges.
  • Adding section shadow:
    • By adding a shadow to the section, we have the option to adjust its color
  • Header:
    • We can apply a style to the container header using a list of styles or calculate it using formulas. Additionally, we can set the style from the formatting bar, add borders, and save the selected style.
  • Button:
    • We can choose a style for the button from the available options in the list of styles or calculate it using formulas. Alternatively, we can independently assign a color. After determining the preferred style, we can save it for later use.
  • Button (hover):
    • Style options can be specified similarly to the button, with the difference that the style will be applied when hovering over the button.
  • Contents:
    • We can select a style for the container content from the list of styles or calculate it using formulas. Additionally, we can assign a color to the container, set borders, and save the style.

Next to each style property, there is an icon  thet allows you to:

- reset the applied style

-save the selected style

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk