New properties in Design System Wizard v15 #U3

As of WorkWithPlus for Web 15 Upgrade #3, along with the addition of Unanimo's Design System, new properties were added to the Design System Wizard so you can maximize your designs.

 

Step Property
Menu and Header style Menu Toggle Position
Style: Modern
Attributes and Background styles Horizontal Position
Line separator
Tabs style: Simple
Panels width
Other style configurations Buttons style: Fixed bottom
Default instance configurations Grid actions: Inside grid(text)
Grid actions position


Step 4 - Menu and Header style

 

Menu Toggle Position

A new position for the Toggle Menu has been added. You can now position it at the bottom of the menu.

Closed Menu Opened Menu
The "MENU AND HEADER STYLE" wizard step shows the "Menu toggle position" dropdown open with options In header, In menu top, and In menu bottom, the last one highlighted. An orange arrow points from the highlighted setting down to a highlighted collapse-arrow toggle button at the bottom of the sidebar menu in the Persons Sample Selection preview. The "MENU AND HEADER STYLE" wizard step shows the "Menu toggle position" dropdown with "In menu bottom" selected, and an orange arrow pointing from this setting to a highlighted collapse-arrow toggle button at the bottom of the wide sidebar menu in the Persons Sample Selection preview, next to the Selection menu item.

 

Style: Modern

A new style has been added to the menu and header. This new menu follows the style of the Unanimo Design System.

The "MENU AND HEADER STYLE" wizard step shows Style set to Modern (highlighted by a yellow arrow), Menu Background Color Dark, and Menu toggle position "In header". The preview shows a dark full-width top header bar with the WORKWITHPLUS logo, hamburger icon, centered application title, and star/Account/gear icons, with a sidebar and Persons Sample Selection grid below.

 

Step 7 - Attributes and Background styles

 

Horizontal Position

The possibility of configuring how you want the attribute and variable labels to be aligned is included.
You have two possibilities: Left and Right.

Horizontal Position: Left Horizontal Position: Right
A form-layout settings panel shows Attributes Widths (Fixed width), Label Position (Left), Horizontal Position ("Left" selected, orange arrow pointing to preview), and Readonly Attributes (Background Color). The preview shows General Information fields (Id, First Name, Nick Name, Home Number, Music Band) with labels aligned to the left of the input boxes. A form-layout settings panel shows the same Attributes Widths, Label Position, and Readonly Attributes options as a related screenshot, but with Horizontal Position set to "Right", and an orange arrow pointing to the preview where the Id, First Name, Nick Name, Home Number, and Music Band labels are right-aligned above the input fields.


Readonly attributes: Line separator

The possibility of adding line separators to your designs is included.

Design System Wizard step 7, "Attributes and Background Styles". The Readonly Attributes group has the "Line Separator" checkbox highlighted, with an arrow pointing to the rendered Transaction preview where a horizontal separator line now appears below the Id and Birth Date fields.


Tabs style: Simple

New style for tabs included.

  • Regular
  • Modern
  • Simple {new}

Design System Wizard step 7, "Attributes and Background Styles". The Tabs Style section has "Simple" selected and highlighted, with an arrow pointing to the View screen preview "Person :: Mary Johnson" rendered with General, Email, and Project tabs in the simple tab style.

 

Panels width

New option that determines whether the panel will take up 75% of the width of the available space in the panel container or 100%.

  • Regular
  • Full width

 

Step 8 - Other style configurations

 

Buttons style: Fixed bottom

The possibility of having fixed actions at the bottom is included, this way they will always be at the bottom so you can have them at your fingertips at all times.

Design System Wizard step 8, "Other Style Configurations". The Grid Style section has "Fixed bottom" selected and highlighted, with an arrow pointing to the Transaction preview where Cancel and Confirm buttons are fixed to a bottom action bar of the panel.

 

Step 9 - Default instance configurations

Grid actions: Inside grid(text)

The possibility of having actions within the grid is included. These actions will be with text instead of images or icons.

  • Inside grid (text) {new}

Design System Wizard step 9, "Default Instance Configurations". Grid Actions option "Inside grid (text)" is selected and highlighted, with an arrow pointing to UPDATE and DELETE text links rendered inside each row of the "Persons Sample Selection" grid preview.


Grid actions position

The possibility of positioning the actions within the grid to the left or right is included.

Grid Actions: Position Left Grid Actions: Position Right
Design System Wizard step 9, "Default Instance Configurations". The Grid Actions Position setting is highlighted with "Left" selected, and an arrow/box points to the UPDATE and DELETE action column placed at the left side of the grid rows in the Selection preview. Design System Wizard step 9, "Default Instance Configurations". The Grid Actions Position setting is highlighted with "Right" selected, and an arrow/box points to the UPDATE and DELETE action column now placed at the right side of the grid rows in the Selection preview.