WebApps:Tilesdesigner

Available from CoP 10 HF 3.1

The Tilesdesigner is an intuitive WYSIWYG tool to create and adjust the graphical user interface of the CoPlanner Webclient.

System requirements

The requirements can be found here.

Invocation

@Session_WebAppUrl@/Tiles/?menu=<2nd Layer from the Dimension navigation tiles>

Example:

https://servername:4444/coplanner/Tiles/?menu=reporting

(Link to the NavigationTiles article)

Extended invocation

• hideSessionHeader: Defines if the session header should be visible or not (true fades out the Session-Header). Default while opening is false

Example:

https://servername:4444/coplanner/Tiles/?menu=reporting&hideSessionHeader=true

Menu

Button	Action
	Back to last page.
	Open/Close of display text of menu.
	Checkin/Checkout (available from CoP 10 HF 3.3)
	Change to visual mode
	Reset changes to last save
	Save all changes
	Deletes selected element
	Add new tile group
	Add new tile to the selected group
	General Settings

Usage

General Hints

• Editing the tiles is only possible in power user mode.
• Editing the tiles is only possible when it is checked out.
• Mainly the designer is used via drag and drop and the context menu.
• After the changes are done, the changes have to saved and checked in again

Creation of new groups of tiles and single tiles

Prerequisite: A tiles menu has already been created.

If you want to create a complete new menu, it has to be created first in the dimension maintenance for the navigation tiles. When it has been created, it is empty and looks similar to the following screenshot.

Click onto the gearwhell on the upper left side, to change into the edit mode. After that the page has to be checked out. If you now click onto symbol "Add new group" on the left side, the first tiles group can be added.

Hint  The first tiles group cannot be added through the context menu, the sidebar has to be used. (Further information on the sidebar, can be found above in this article.) If there are already elements or tile groups, also the context menu can be used, to create new tiles or tile groups.(further information can be found below).

Adjustment of tile groups

In this paragraph you can find information about the configuration options for the tile groups.

General usage hints for tile groups

• Arange tile groups: the order of the tile groups can be arranged per drag and drop by clicking onto the - symbol on the upper right. The groups can be arranged arbitrary horizontally.
• Rename tile groups: To create a title or rename a tile group, simply click into the group header
• long tile group headers are wrapped automatically in the view mode. (available from CoP 10 HF 3.3)

Detailed usage of the tile groups.

In the contextmenu you can find further options to adjust the tile group. The context menu can be opened either by clicking left mouse onto the three dots or via the right mouse button.

The context menu consists of the following entries:

Columns per group (available from CoP 10 HF 3.3)
The width can be defined here. That means, how many tiles should have space side by side. (possible values: 2 – 10)

Image
A small image/icon can be defined here, that es shown on the upper left besides the title of the group. When there is already an image, it can be deleted in this menu.

Enabled
It can be defined here, if the group is active. If it is active or not can also be controlled by a condition. (e. g. depending on which user is logged in, the group is active or not).

Visibility
It can be defined here, if the group is visible or not. The visibility can be controlled by a condition. (e. g. depending on which user is logged in, the group is visible or not).

Color setting
This menu contains the color settings for the group. It consists of the following submenu:

• Edit fore color of group

The color of the header of the tile group can be defined here.

• Default colors for new tiles

The background and text color of tiles that are newly created within this group, can be defined here.

• Change colors of existing tiles

The background and text color of already existing tiles in this group can be defined here. When you click "OK" the color is applied on all already existing tiles in this group.

New
In this menu new elements can be created. It consists of the following submenu:

• Element on same level

A new tile group can created here.

• Element on sublevel

A new tile within this group can created here.

Delete
Delete this tile group.

Adjust tiles

In this paragraph further information can be found about the customization options for tiles.

General usage hints for tiles.

• Move/arrange/nest tiles

Tiles can be moved between other tiles via drag and drop and also can be nested into each other and brought back out again.

• The maximum number of sublevels of a tile is two. (So overall four layers: Tilegroup - tile - 1st subtile - 2nd subtile)

Hint  This restriction results in the fact, that sometimes it is not possible to nest tiles into each other, because the maximum number of subtiles would be exceeded.

• Tiles that have subsidiary tiles are container elements only

When a tile has a navigation action assigned to it, gets assigned a subtile, the navigation action has no effect anymore. It works only as a container for the other tiles.

• Multiselection

Multiselection of tiles e. g. in order to move more than one tile at a time or adjust options for more than one tile simultanously is possible through the common shortcuts like Ctrl + mouseclick or Shift + mouseclick.

• Tiles do not wrap to long captions. If the caption is too long it can be read completely through the mouseover action "tooltip"

Usage of the tiles in detail

Further options to adjust the tiles can be found through the context menu. The context menu can be opened either by clicking left mouse onto the three dots on the upper left or by clicking the right mouse button onto the tile.

The context menu consists of the following entries.

Rename
The tile can be renamed here more precise: A caption can be assigned to a tile here. (Hint: Caption !=Elementname in dimension maintenance).

Text formatting (available from CoP 10 HF 3.3)
The text of the tile can adjusted here. It consists of the following submenu:

• Edit for color

The text color can be adjusted here. The color can be changed via a color picker, RGB or HUE values or via hexadecimalcode.

• Position (available from CoP 10 HF 3.3)

The vertical and horizontal alignment of the caption can be adjusted here.

Hint  When in the submenu "Style"(further information about this can be found below in this article) on of the two "Subtile underneath tile" option is chosen, the vertical alignment option of the text has no effect. The text will always be shown on the bottom of the tile.

• Font size (available from CoP 10 HF 3.3)

The font size of the caption can be adjusted here.

Image (available from CoP 10 HF 3.3 as a menu with a submenu)
An image that is shown on the tile can be added in this menu. It consists of the following submenu:

• Edit (always visible)

An image or an icon can be chosen here, either from the list of CoPlanner icons or an own image can be added. When an image is already assigned to the tile, it can be swapped in this dialog.

• Delete (only visible when an image already is assigned to the tile)

Delete a already assigned image.

• Scale (only visible when an image already is assigned to the tile) (Ab CoP 10 HF 3.3)

The scale of the assigned image can be adjusted in this submenu.

Enabled
It can be defined here, if the tile is active. If it is active or not can also be controlled by a condition. (e. g. depending on which user is logged in, the tile is active or not).

Visibility
It can be defined here, if the tile is visible or not. The visibility can be controlled by a condition. (e. g. depending on which user is logged in, the tile is visible or not).

Add navigation action
In this dialog it can be defined here, what action should be performed when the tile is clicked. More Information about this dialog can be found in the article Linkbuilder

State
It can be defined here if the tile has a state. This state also can be controlled by a condition.

Edit background color (this entry was moved from a submenu to the main level of the contextmenu in CoP 10 HF 3.3 )
The background color the tile can be changed here.

Style
The style of the tile can be defined here.

Setting	Description	Example
Subtile underneath tile, small tile	If there subentries for the tile, they are displayed in a dropdown menu that opens below the tile width of the tile: 1 column
Subtile underneath tile, large tile	If there subentries for the tile, they are displayed in a dropdown menu that opens below the tile width of the tile: 2 column
Subtile on tile, small tile	If there subentries for the tile, they can be displayed through clicking onto arrow on the right side of the tile. width of the tile: 1 column
Subtile on tile, large tile	If there subentries for the tile, they can be displayed through clicking onto arrow on the right side of the tile. width of the tile: 2 column

New
New elements can be created here

• Element on same level

Creates a new tile on the same level.

• Element on sublevel

Creates a new tile that is attached to the current tile.

Delete
Deletes the current tile and all subelements.

Subtile menu

The subtile menu can be found by clicking the gear symbol on the tiles.

In the subtilemenu, submenu entries can be edited. It follows the same use principles like on the parent level within the tile groups. Tiles can be moved, rearranged etc. and also the context menu can be used. Compared to the parent level it contains less options. In the header also the tiletitel can be edited.

It is also possible to open the subtilemenu of the 2nd sublevel. How it can be accessed depends on the chosen style of the tile.

• Submenu for the 2nd sublevel, when "subtile on tile" is chosen

• Submenu for the 2nd sublevel, when "subtile underneath tile" is chosen

Compared to the other levels it contains less options.