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.
Aufruf im Web
@Session_WebAppUrl@/Tiles/?menu=<2nd Layer from the Dimension navigation tiles>
Example:
https://servername:4444/coplanner/Tiles/?menu=reporting
(Link zum Artikel der NavigationTiles)
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
Menü
| Schaltfläche | Aktion |
|---|---|
|
Zurück zur letzten davor aufgerufenen Seite. |
|
Öffnen/Schließen der Anzeigetexte des Menüs. |
| File:ReportViewer Checkout.JPG | Ein-/Auschecken (Ab CoP 10 HF 3.3) |
| File:Dahboard Ansichtsmodus.PNG | Wechsel in den Ansichtsmodus |
|
Zurücksetzen auf Status der letzten Speicherung |
|
Speichert alle Änderungen |
|
Löscht das ausgewählte Element |
| File:Web Tilesdesigner NeueKachelgruppe.png | Neue Kachelgruppe hinzufügen |
| File:Web Tilesdesigner NeueKachel.png | Neue Kachel in der ausgewählten Gruppe hinzufügen |
| File:Web Einstellungen Kontursymbol.png | Allgemeine Einstellungen |
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 File:Web TilesDesigner KachelgruppeVerschieben.png - 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. Context menu can be opened either by clicking left mouse onto the three dots or via the right mouse button.
File:Web TilesDesigner Kontexmenüaufruf.png
The context menu consists of the follwing 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. Also 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"
Bedienung der Kacheln im Detail
Über das Kontextmenü stehen weitere Optionen zur Anpassung der Kacheln zu Verfügung. Das Kontextmenü kann entweder durch einen Klick auf die rechte Maustaste auf der Kachel oder einen Linksklick auf die drei Punkte oben links auf der Kachel erreicht werden.
Das Kontextmenü enthält die folgenden Einträge:
Umbenennen
Hier kann die Kachel umbenannt werden bzw. eine Caption vergeben werden. (Hinweis: Caption != Elementname in der Dimensionswartung)
Textformatierung (Ab CoP 10 HF 3.3)
Hier kann der Text der Kachel angepasst werden. Es enthält folgende Submenüpunkte:
- Schriftfarbe bearbeiten
- In diesem Dialog kann die Schriftfarbe angepasst werden. Es steht eine Farbauswahl zu Verfügung, sowie die Eingabe als RGB Wert, Hexadezimalcode oder mittels HSV Wert.
- Position (Ab CoP 10 HF 3.3)
- In diesem Menü kann sowohl die vertikale als auch horizontale Position der vergebenen Caption angepasst werden.
Hinweis Ist als Einstellung im Menü "Darstellung" (siehe weiter unten in diesem Artikel) eine der beiden „Öffnet nach unten“ Optionen ausgewählt, hat die vertikale Textausrichtung keine Funktion, der Text wird dann immer unten angeheftet.
- Schriftgröße (Ab CoP 10 HF 3.3)
- In diesem Menü kann die Schriftgröße der Caption eingestellt werden.
Bild (Ab CoP 10 HF 3.3 als Menü mit Subpunkten)
In diesem Menü kann ein Bild hinzugefügt und angepasst werden, welches dann auf der Kachel angezeigt wird. Es enthält folgende Submenüpunkte:
- Bearbeiten (immer sichtbar)
- In diesem Dialog kann ein Bild/Icon aus der Liste der CoPlanner Icons oder ein eigenes Bild hinzugefügt werden. Wenn bereits ein Bild vorhanden ist, kann es über diesen Dialog ausgetauscht werden.
- Löschen (nur sichtbar, wenn bereits ein Bild eingestellt ist)
- Das vorhandene Bild löschen.
- Skalieren (nur sichtbar, wenn bereits ein Bild eingestellt ist) (Ab CoP 10 HF 3.3)
- In diesem Submenü kann die Skalierung des eingestellten Bildes angepasst werden.
Aktiv
Hier kann definiert werden, ob die Kachel aktiv ist. Der Aktivstatus kann auch über eine Bedingung gesteuert werden (z. B. abhängig davon welcher User eingeloggt ist, ist die Kachel aktiv oder nicht).
Sichtbarkeit
Hier kann definiert werden, ob die Kachel sichtbar ist. Die Sichtbarkeit kann auch über eine Bedingung gesteuert werden (z. B. abhängig davon welcher User eingeloggt ist, ist die Kachel sichtbar oder nicht).
Navigationsaktion hinzufügen
In diesem Dialog kann definiert werden, welche Aktion beim Klicken der Kachel ausgeführt werden soll. Dieser ist im Artikel WebApps:Navigationsaktionen(Linkbuilder) genauer beschrieben.
Status
Hier kann ein bestimmter Status für die Kachel festgelegt werden, der dann an der Kachel angezeigt wird. Dieser kann auch über einen Ausdruck/eine Bedingung gesteuert werden.
Hintergrundfarbe bearbeiten (Ab CoP 10 HF 3.3 aus einem Submenü auf diese Kontextmenüebene verschoben)
Hintergrundfarbe der Kachel verändern.
Darstellung
Hier kann die Darstellung der Kachel eingestellt werden. Folgende Einstellungen sind möglich.
| Einstellung | Beschreibung | Beispiel |
|---|---|---|
| Submenü öffnet nach unten, kleine Kachel | Wenn die Kachel Subeinträge enthält, werden diese über ein Dropdown Menü unterhalb der Kachel angezeigt. Kachelbreite: 1 Spalte |
File:Web TilesDesigner KleineKachelNachUnten.png |
| Submenü öffnet nach unten, große Kachel | Wenn die Kachel Subeinträge enthält, werden diese über ein Dropdown Menü unterhalb der Kachel angezeigt. Kachelbreite: 2 Spalten |
File:Web TilesDesigner GroßeKachelNachUnten.png |
| Submenü auf Kachel, kleine Kachel | Wenn die Kachel Subeinträge enthält, werden diese bei einem Klick auf den Pfeil auf der rechten Seite der Kachel über eine Slider Animation sichtbar und können ausgewählt werden. Kachelbreite: 1 Spalte |
File:Web TilesDesigner KleineKachelAufKachel1.png File:Web TilesDesigner KleineKachelAufKachel2.png |
| Submenü auf Kachel, große Kachel | Wenn die Kachel Subeinträge enthält, werden diese bei einem Klick auf den Pfeil auf der rechten Seite der Kachel über eine Slider Animation sichtbar und können ausgewählt werden. Kachelbreite: 2 Spalten |
File:Web TilesDesigner GroßeKachelAufKachel1.png File:Web TilesDesigner GroßeKachelAufKachel2.png |
Neu
Über diesen Menüpunkt können neue Elemente angelegt werden.
- Element auf gleicher Ebene
- Legt eine weitere Kachel auf der gleichen Ebene an.
- Element auf Subebene
- Legt eine Kachel an, die der aktuellen Kachel untergeordnet ist.
Löschen
Löscht die aktuell ausgewählte Kachel und alle Subelemente.
Subkachelmenü
Das Subkachelmenü kann über die Zahnräder auf den einzelnen Kacheln erreicht werden.
Über das Subkachelmenü können Menüeinträge auf Unterkacheln bearbeitet werden. Dies geschieht nach dem gleichen Prinzip wie auf der Parentebene innerhalb der Kachelgruppen. Es können Kacheln verschoben werden, neu angeordnet werden etc. und das Kontextmenü verwendet werden. Dieses enthält im Vergleich zur Parentebene etwas weniger Optionen. In der Titelleiste kann außerdem der Kacheltitel bearbeitet werden.
Es ist auch möglich das Subkachelmenü der zweiten Subebene zu öffnen. Je nach Ansicht ist dies - wie in den zwei folgenden Screenshots ersichtlich - möglich:
- Submenü für die zweite Ebene, wenn „Menü öffnet auf Kachel“
- Submenü für die zweite Ebene, wenn „Menü öffnet nach unten“
Auch hier sind die Einstellungsmöglichkeiten leicht reduziert.
