Layout Widgets

Last modified on 2022/05/28 10:53

Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png These types of widgets belong to the Layout category in the widget library. They are used to define the position of widgets in the app.

To make positioning easier, the screen is divided into rows, each virtually separated into a maximum of 12 columns of equal width. Depending on the size of the device (e.g. computer screen, smartphone, tablet or TV), a widget can occupy all 12 columns (one whole row) or several widgets can be displayed in the same row.
         EVApps - widget Layout - Virtual Screen.png

You can predefine the position of widgets within a row in several ways. The size of each position can be adjusted manually at a later time.

Widget Type of utilisation Design
Apps - Widget - Layout 12 icon.png Large screen Groups all 12 columns to position a single widget
Apps - Widget - Layout 6 icon.png Creates 2 positions with a width of 6 columns each
Apps - Widget - Layout 4 icon.png Creates 3 positions with a width of 4 columns each
Apps - Widget - Layout 3 icon.png Creates 4 positions with a width of 3 columns each
Apps - Widget - Layout 2 icon.png Smartphone screen Creates 6 positions with a width of 2 columns each

Note: Widgets can be displayed one below the other

Notes

Open url.png See General information on widgets.

  • The app can occupy an unlimited number of rows.

Caution

  • If you delete a row, all of the widgets placed in it will automatically be deleted.

Best Practice big icon.pngBest practice

  • Create a restore point using EVApps - GUI - History icon.png before modifying the widget's properties and layout.

Procedure: How to define the position of widgets

1. Click Apps - Add widget icon.png in the Objects pane.

2. Click and drag one of the widgets from the Layout category Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png to the Design pane.

  • In a new page, the Design pane will display the first row with the words Drop a Layout Widget Here.
             EVApps - widget Layout - Procedure 1.png
  • The positions available will appear in green with the words Drop Here.
             EVApps - widget Layout - Procedure 2.png
  • The row is divided into the number of equal-width columns corresponding to the selected widget.
             EVApps - widget Layout - Procedure 3.png

3. You can define the columns below a position.

Step 1 Step 2
EVApps - widget Layout - Procedure 4.png EVApps - widget Layout - Procedure 5.png

4. You can make modifications to the position in the Design pane:

  • To increase the width of a position, click EVApps - GUI - Move right icon.png in the toolbar of the right column.
Step 1 Step 2
EVApps - widget Layout - Procedure 6.png EVApps - widget Layout - Procedure 7.png
  • To reduce the width of a position, click EVApps - GUI - Move left icon.png in the toolbar of the left column.
Step 1 Step 2
EVApps - widget Layout - Procedure 8.png EVApps - widget Layout - Procedure 9.png
  • To delete the positions within a row, click Apps - Delete icon.png in its toolbar. Caution: All of the widgets in the row will be deleted.
Step 1 Step 2
EVApps - widget Layout - Procedure 10.png EVApps - widget Layout - Procedure 11.png
  • To delete a position, click Apps - Delete icon.png in its toolbar. Caution: The widget found in this position will be deleted.
Step 1 Step 2
EVApps - widget Layout - Procedure 12.png EVApps - widget Layout - Procedure 13.png
  • To move a row, click Cursor move icon.png in its toolbar.
Step 1 Step 2 Step 3
EVApps - widget Layout - Procedure 14.png EVApps - widget Layout - Procedure 15.png EVApps - widget Layout - Procedure 16.png
  • To divide a column into 2, click Apps - Plus icon.png in its toolbar.
Step 1 Step 2
EVApps - widget Layout - Procedure 17.png EVApps - widget Layout - Procedure 18.png
Tags:
Powered by XWiki © EasyVista 2022