CD-compatible application design

GAPTEQ offers its own template system (Page templates) and the option of working with different color schemes for the efficient implementation of a CD-compliant design.

In this article you will read the following content:

Create and configure template

Storing color schemes for components

Working with Page templates is recommended for a uniform design of GAPTEQ solutions. It is possible to define a template as a standard for all pages as well as the variable assignment of different templates on a page-by-page basis.

1. Create and configure template

• Open the main menu and navigate to the “Page templates” via the “Repository” tab.

• To create a new template, click on the green plus symbol. The creation dialog opens.
• Then select which standard template you would like to use from the drop-down menu under “Templates”.

• Predefined placeholder variables are available for selection in the “Placeholder” menu. These can be placed anywhere in the template (HTML tab) (e.g. HomeLink, UserLogin, UserFullName).
• Under “Links” (ImageUrl and PageUrl) you will find helper functions to create links to pages and images.

Example of a created link to a selected page:
$[PageUrl(/Public/Pages/pageStartCustomer)]


This is what a functioning HTML link looks like:

<a href=“$[PageUrl(/Public/Pages/pageStartCustomer)]“>Startseite Kunden</a>

• Predefined queries for use in the template are available for selection under “Conditionals”.

Example “Authenticated”: If the user is logged in, a welcome message and the logout are displayed. The user who is not logged in sees the login link.

Example “isMemberOf”: The isMemberOf condition can be used to create code blocks in the template that are only visible in the frontend for the specified user groups. The condition has an optional ELSE branch for HTML code that is output if the user is not a member of the group. For example, you can create navigation areas according to your rights management that are only visible to authorized users.

• If you would like to use your newly created template as the default template, right-click on the template to open the context menu and select “Set as default page template”.

• If you want to use a different template for a page, this can be selected in the properties of the page (Page Properties).

2. Storing color schemes for components

In GAPTEQ, it is possible to store an individual color scheme and assign it to a component, such as buttons, grids or tables. 

• Open the main menu and navigate to the “Color Schemes” via the “Repository” tab - similar to the page templates.
• The green plus button allows you to configure a color scheme (background, font color, hover effect, ...) for each component (button in the example).  

• To assign the configured color scheme to the component, go to the component page and select the stored scheme under “Color scheme” in the properties.