Styling

• Customized design
• Multi device
• Tenant whitelabeling

Customized design

To customize the look and feel of your platform, you can excert detailed control of all design elements

• Stylesheets defining colors, graphics and fonts
• Templates (rendering) controlling how pages are rendered
• Wrapper controlling the header and footer on all pages
• Language where labels on buttons are set
• Buttons which controls the iconography

Note that default design is well tested 100% responsive, so take care not using too many !important or fixed width declarations.

Design quickstart

For a most basic functional customer design you can define 3 colors and a URL to a logo.

Instructions

1. Designer > Design > Stylesheet
2. Edit values in
   • themePrimary
   • themeSecondary
   • background
3. Reload page with CTRL + SHIFT + R

Stylesheets

Styling is written using CSS declarations. The different stylesheets can be used both genericly, for a single entity or a single interface.

Th TS stylesheets are modular in the sense, that the can inherit content from each other. All stylesheets can refer a parent stylesheet: The parents stylesheets are simply prepended to child stylesheet.

The TS design is based on Bootstrap 4.1, whos declarations can be used and changed if needed.

Colors and most size definitions are set in CSS variables, which which use we strongly encourage.

Instructions

The following will create a new stylesheet and use it on the whole application

1. Module > Design > Stylesheet
2. Add a new stylesheet
   • Specify parent
   • Insert CSS declarations
   • Note the ID after update
3. Modules > Configuration
4. Set defaultStylesheet = ID

Context sensitive styling

In some cases your design needs to change according to usecase, user in question or choices made using the application.

By default the following CSS classes are added to the page depending on the situation

• Command requested: Ex. editCommand
• Language selected: Ex. daDK, enUK
• User template: Ex. IsAdministrator, IsAnonoumous

In addition it is possible to add a CSS class to a group, and then all users in that group will have that class added to their page.

Templates

The HTML templates contains tags, that helps the system render correctly. The template can contain both generic field markers, and specific ones tied to a single field. The rendering will first look for a specific tag, and if that is not present default to the generic ones. Templates can be shared between multiple entities, or be tied to a single one.

Note: When editing templates make sure that they are still WCAG compliant. Ordering of elements and ID markup is important for it to work.

Website wrappers

Wrapper allow TempusServa installations to wrap itself in content from other sites.

You provide an URL for page you want to look like, and the server will download and rewrite the contents in the page. The method is however not flawless, and some sites due to poor design or security restrictions cannot be mimicked at all. Normally the contents will get refreshed on fixed schedule, but in some instances it will be required to do some manual tweaking of the code afterwards.

Instructions

1. Add a new Wrapper
2. Insert URL of the page
3. Insert HTML tag where output should begin
   • Display the source of the page in another browser
   • Note at which tag the dynamic content starts
   • Optionally provide an end tag to
4. Optionally insert extra code before and after the content
5. Test the page
6. Change the defaultWrapperID in Designer > Modules > Configuration

Troubleshooting tips

• Check stylesheets for local references (TS will only collect the main page)
• Disable any <form> tags in the page

Multi device

By default alle applications built on the platform will work equally well on PC's, phones and tablets.

Certain features on phones are automatically available when using these devices

• Clicking phone numbers will make a call
• Camera will open when adding pictures to a record

TS Gateway App

Frequent mobile users will sometime prefer to have a dedicated app, to have access via an icon and to utilize thes phones authentication.

I that case we can registrer you application in the TS Gateway App, and the users will only have to authenticate themselves a single time. Note on the first login, they will also have to choose what application they are accessing.

In case you want an app with specific name and icon, we build dedicated apps (Apple + iPhone) to your company in 8-10 hours.

Working offline

Applications can be set up to work offline, using cached copies of the website. In the meantime new records can be created and pictures can be attached to the records. When Internet connection is available again, the collected data will be sent to the server.

Contact TS Support to lean more about this feature.

Tenant whitelabeling

The Tenant whitelabeling feature allows you to apply different branding and styling for each ExclusiveGroup in an application.

This is handled by inserting an additional stylesheet into the page, by including a special codeunit page inside ALL pages (displayed at the top).

Limitations:

• Users without an ExclusiveGroup assigned to their user profile will not experience the special styling
• It only works with one ExclusiveGroup per tenant (multiple ExclusiveGroups are not possible)

Configuration:

To apply Tenant whitelabeling to an instance go through the following steps

1. Change the configuration "doIncludeGlobalContent" to: true
2. Change the configuration "globalContentCodeunit" to: dk.tempusserva.solution.whistleblow.ContentCustomerStylesheet
3. Create a stylesheet including the "Group " and the ExclusiveGroup ID - Example: GroupID 123