Mask editor (2nd generation)

Basics

The CURSOR-CRM offers a 2nd generation mask editor. Existing masks from CRM now no longer have to be pixel-precise but can be created responsively. Flex layout allows the application to be optimally displayed by the device used and its display capabilities. To be allowed to edit a mask, you need a corresponding authorization.

The Flex layout is only available in the Web Client. With the tool you edit masks for both Windows and Web Client. However, the masks for the Windows client are generated with the reduced functions. Especially layout settings that are controlled by css in the Web Client. If a pixel-precise mask is created and saved from the Windows Client in the Flex layout, it can no longer be designed pixel-precisely.

C0 masks must first be overridden in the Rich Client admin console so that they can be edited in the mask editor.

Tips for mask design

Before you edit a mask, note the following points:

• do you have corresponding rights

• If necessary, check the preview at low resolution (device preview)

• if you migrate from the old "mask format" to the new one, the changes cannot be restored to the old format with the new mask editor.

• Even for minor customizations, we recommend switching to the Responsive Design

• You don't necessarily have to convert all entity masks at once, the application supports both formats.

• The suggested parameters of the layout properties should be adjusted only with caution. CSS knowledge is an advantage when configuring the layout properties. Moreover, these changes do not take effect in the Windows Client.

Starting the editor

• open the context menu on the mask you want to edit by right-clicking on the entity heading and click Mask editor

• Alternatively, click the shortcut keys CTRL +ALT+ SHIFT ⇧+ M

• or select Open mask editor in the Help menu.

At the start, select which mask you want to edit:

Enter the entity name and confirm with Apply.

General notes on operation

• Revision takes place in the workspace - configuration in the panel on the right

• New components are added by drag and drop while respecting the hierarchy

• Tabs must be placed on the tabs headers

• You can delete or move selected elements on the mask or select them with the overlying component

• In the tree view, components can be arranged differently in a hierarchy using drag and drop.

• Fields can be filtered

• Collapsing/expanding of the components in the tree view is possible

• Multi-selection of components and simultaneous editing is also possible

• When exiting, a security dialog appears asking whether changes should be saved

Structure

Once a mask has been selected, it can now be revised.

Figure: View of a mask in the editor

The editor window can be divided into the following areas:

• Toolbar

• Device Preview

• Workspace

• Configuration Area

Import/export masks

Mask designers can now cache Flex masks as a file from within the mask editor to access various intermediate states and also transfer masks from a sandbox system to a development system.

• The export offers the Flex mask as XML for saving in the client's file system.

• The import reads this XML file and replaces the current mask in the editor.
  The imported mask must be saved explicitly to ensure module affiliation etc.

Tree View

Under Tree View the hierarchy structure can be viewed. The elements can then be dragged and dropped or temporarily hidden by clicking the eye icon.

Configuration

Parameters for the mask components are stored under Configuration.

Components

Components are individual mask parts, such as containers and fields, with which you create a mask. These are to be placed in the workspace.

Layout properties are configured for each component.

Search components

It is possible to search components by ID names. If the ID name is entered in the tree view, the component is highlighted on the mask and in the tree view.

Figure: Search function in the mask editor

2 3 4 columns

Column container

• Component type

• Name

• Increase vertically - the remaining vertical space in the parent container is used

• Wrap around - determines whether the line should be wrapped at smaller resolution (yes, no)

Column

• Component type

• Name

• Standard width

• Maximum width - Within this range, the column scales analogously to its Flex width.
  If all columns have a maximum width and the window becomes larger than the sum of these, whitespace is generated and the layout is centered in it. The columns are centered and the whitespace is evenly distributed around them.
  If all columns have a standard width and the window becomes smaller than the sum of these, the columns are wrapped (Flex wrap)

• Minimum height

• Distance

Report

• Component type

• Name

• Report - underlying evaluation

• Run automatically in (manually / in seconds)

• Show toolbar

• Increase vertically

• Minimum height (if Increase vertically is activated)

Box

Simple container (replacement for previous panels)

• Component type

• Name

• Show border

• Increase vertically

• Minimum height

• Spacing - inner spacing

Button

Button on the mask

The button must be added to an existing field group

• Component type

• Name

• Text - tooltip

• Fill horizontally

• Icon

• Standard width

• Height

• Spacing - spacing to the outside to other components

• Text alignment

Colapsible

• Component type

• Name

• Text

• initially collapsed

• Increase vertically

• Maximizable

Field group

• Component for containers for labels, buttons and fields.

• Fields added from the component list are already in a field group and cannot be added to an existing field group yet.

• Component type

• Name

• Wrap around (yes, no)

• Spacing - internal spacing (padding)

Infoboard

• Component type

• Name

• System default - Boards marked as "System default" in the mask editor cannot be edited by users on the entity masks. This prevents the board management from being called.

• Increase vertically

• Infoboard - launches the board configurator

• Minimum height

• Distance

Map

Cards are containers with a preconfigured design. So a map gets an (nearly) white background and a slight shadow.

• Component type

• Name

• Increase vertically

• Remove spacing

• Maximizable

• Minimum height

• Distance

Other properties of a map and its use with other components:

• A TabbedPane is to be used as a central element in the UI

  • The pane is displayed as a map; gets exactly such a (nearly) white background and a shadow

  • Other TabbedPanes, boxes, collapsibles, column layouts, etc. placed on it are not displayed as cards

    • → No Cards in Cards!

• Multiple cards can be used in the UI side by side or underneath each other

  • TabbedPanes, boxes, collapsibles can be used on these cards again

    • These child components are no longer represented as cards

      • → No Cards in Cards!

  • The cards are organized in column layouts

• When a TabbedPane is placed directly on the background or in a column layout, this pane is displayed as a map

• TabbedPanes that are inside another TabbedPane or card are no longer displayed as card themselves

• Thereby, the following rules apply to the corresponding components:

• Collapsibles have 2 styles:

  • Without borders: Then they lie without margin on the edges of the map (and also of TabbedPanes)
    

    

    
    
    

  • With borders: Then they lie with margin in the map (and in the TabbedPane), so that a recognizable space between map and frame exists
    

    

• • TabbedPanes have 2 styles:

    • Without borders: Then they lie without margin on the edges of the map (and also of other parent tabs and collapsibles)
      

      

      
      

    • With borders: Then there is a margin so that the frame is visible in the map
      

      

      
      
      

  • Infoboards and webviews are located without margin at the edges of the map

    • Same defaults with frame de-/activated as above

Label

Field description

• Component type

• Name

• Text (tooltip)

• Fill horizontally

• Wrap text

• Icon

• Standard width

• Height

• Distance

• Text alignment

Mask designer can have the associated label generated for a field placed on the mask and marked before. It will be placed in front of the corresponding field within the same field group. The label is generated only if the field for which it is to be generated does not already have the associated label in the editor.

When you press the button, the system checks whether exactly one field is selected. If several fields are placed at the same time, a message is displayed that the function is only available if exactly one field is selected.

Tab

Single tab

A tab must be added to an existing tab group.

• Component type

• Distance

Tab Group

A collector for several tabs

• Component type

• Name

• Increase vertically

• Tabs

• Maximizable

• Minimum height

Webview

Website embedding

• Component type

• Name

• URL

• Use login token - relevant for pages where login is required

• Show border

• Increase vertically

• Minimum height - (if Increase vertically is activated)

• Height - (if Increase vertically is deactivated)

• Distance

Fields

Fields are already in a field group when added and can be placed directly on the mask. Fields can be moved to other field groups, but not to other containers.

• Name - internal name that cannot be changed.

• Max width

• Flex basis - suggested minimum width. For smaller resolutions, wrapping is performed within the field group

• Margin

• Special feature: Editor field

If 'Increase vertically' is active, the layout properties (Height and Flex basis) are overridden.

Filter fields

In the component view, available fields can be filtered by name or part name for faster access to the desired field and simplified mask design.

Templates

Ready-made layouts or layout components are also available. These are intended to simplify the mask design.

There are the following templates:

• Component combination: Card + Collapsible (Collapsible card)

• Three column Header layout

• Two column layout

These templates are not configurable and always remain the same.

Guidelines for cards

Assumptions/Prerequisites/Framework conditions for new design

• The masks concern the delivery state in default layer

• Every customer receives all default masks in card layout with the update

• Customer mask masks that override the default masks are not overwritten.

  • Customer masks must be opened manually in the new mask editor. In the information dialog there you have to confirm that you want to change the mask to the Flex layout.

  • Masks in the flex layout can be rearranged using cards.

  • The new elements are accessible via the new mask editor: Collapsibles, cards and boards on cards

• If a customer has customer masks (C2 layer) and default layer masks, the customer masks remain and the default layer masks are converted in the card layout

  • if you want to prevent this, you have to override the default layer masks BEFORE the update

Structure

The masks should be adapted to the new card layout with the following anatomy:

• The Main-Content Area (left) should be in a 2/3 relation to the Aside-Area (right)

  • alternatively, a one-card or three-card layout in the ratio (1:2:1) is possible, depending on the information volume

• TableTail fields are to be removed from the masks

• Collapsibles should not have borders

• Identifiers of fields must not be cut off

• Identifiers of fields must not contain abbreviations

Use cases

(1) Collapsibles should not have borders

Tab groups close flush with open collapsibles, creating a straight, stepless bottom finish to the layout.

(2) Order of the cards

• Tab groups close flush with open collapsibles, creating a straight, stepless bottom finish to the layout.

• If steps cannot be avoided, they should be ascending, i.e. screen-filling elements on the left and smaller cards on the right.

(3) Padding/spacing in components are uniform

Components have default assignments for spacing, so you don't have to adjust them manually.

These are (top - right - bottom - left)

• Box: Minimum height 16px

• Map: Spacing 12- 12- 12- 12, Additional new button to remove spacing with one click

• Tab content: 8- 12- 12- 12

• Collapsible content: 2-10-8-10

• Collapsible: Show border initial to false

• Infoboard: Show border initial to false

• Fields: Standard width 120px (label/button too, also for non-fill-horizontal)

• (4) Main information on the first tab, permanent information on an aside-collapsible

• In the main content area there is a card or a tabset. This contains all the important information.

• Secondary relevant information is located on further tabs and must first be actively selected

• permanently important information (e.g. contact information) is permanently visible. This is made possible by positioning this information on a collapsible in the aside area.

(4) Main information on the first tab, permanent information on an aside-collapsible

• In the main content area there is a card or a tabset. This contains all the important information.

• Secondary relevant information is located on further tabs and must first be actively selected

• permanently important information (e.g. contact information) is permanently visible. This is made possible by positioning this information on a collapsible in the aside area.

(5) A tab group should have no tabs or at least two tabs

• A map can be filled with field groups without tabset. This is especially the case for masks with little information.

• If only one card is needed, there is no need to draw a tabset on the card. A single tab is obsolete and should not be present on masks.

• If information needs to be organized, unimportant information can be moved to the background by moving it to a second tab. Note (4)

(6) Professionally/logically related fields

• professionally/logically related fields are arranged and grouped as a unit. This includes individual field groups (e.g. Name: xxx), as well as groups of fields (e.g. Address data: Street, street number, city...)

(7) Fields, Labels, Collapsibles and Tabs

• The layout elements are arranged in the same way on all masks:

  • 1,2 or 3 columns layout

  • same color scheme

  • on similar masks are similar fields on the same position

(8) Readable labels

• Labels are always completely legible, even with

  • scaled screen

  • different resolution

  • Screen, tablet, smartphone

• Field names are not cut off (e.g. empl. instead of employees)

  • Exceptions: "No."

• Labels always start with a capital letter

• Umlauts are recognized and displayed correctly: Ä,Ö,Ü,ß

• boolean fields/checkboxes are correctly labeled, so that it is directly obvious what a setting of the field triggers, e.g. "Is xy"

(9) Naming of the first tab

• The first tab should be called "Overview" if applicable, otherwise "Info"

(10) Numeric and date fields

• Some fields naturally have little content, e.g. numeric fields (e.g. money amounts). Due to the flex layout, the values are displayed very far away from the label. Therefore, these fields should not automatically "fill horizontally", but should be "short".

• This is especially true for numeric fields and date fields.

(11) Internal names of fields follow a uniform concept

• Field groups → fg<NUMBER>

• Label without field group → C2xx<Name>Label

• Tab group → C2xx<Name>TabSet

• Tab → C2xx<Name>Tab

• Collapsible → C2xx<Name>Collapsible

(12) Entity boards

• Boards are integrated on masks if it makes sense for the entity.

(13) Boards are as system default

• On some masks there are boards. These should all be loaded on the mask and marked as system default. Manual settings are not required (except for special mask-independent board configurations)

(14) Multi-board: Activities&History

• on activity-bearing entities there is always a tab group with two tabs: "Comments/Activities" and "Changes". The corresponding boards are stored on the respective tabs.