Upload templates

Some of the functionality of the OneWelcome Identity Platform can be accessed via a web browser. The look and feel guides are focused on how to adapt the pages to your requirements.

Self-styling enables you to create and upload templates with a company-specific format to your OneWelcome Identity Platform environment. It allows you to match the look-and-feel of your applications with your existing websites by changing company logos, colors, email templates, and so on.

You need knowledge of HTML, CSS, images, and Git.

Preparing the Git repository

When preparing the Git repository, use the proper directory structure.

├── cim
    ├── extension-resources    
       ├── email-templates
       ├── messages
       ├── static
       |   ├── css
       |   ├── images
       |   └── js
       └── templates
           └── personal
├── access
    ├── <template-set-name>
        ├── consent.html
        ├── error.html
        ├── ...
    ├── default
        ├── consent.html
        ├── error.html
        ├── ...
    ├── messages
├── delegation
    ├── locales
        ├── <locale code>
            ├── translation.json
    ├── logo.png
    ├── palette.json
    ├── favicon.ico

CIM directory

The cim directory contains templates and messages for login and registration. In the extension-resources folder, you can add any of the following folders:

• Email templates folder contains templates for emails.
• Messages folder contains key-value messages in multiple languages.
• Static folder contains JavaScript, CSS, images, and other static resources.
• Templates folder contains templates displayed in the frontend.

Access directory

The access directory contains template sets used to change your web applications and mobile clients' look and feel. The name of the directory is resolved as the name of the specific template set. If the template cannot be found in the chosen set's directory, the content is served from the default directory.

The messages subdirectory contains message bundles that the OneWelcome Identity Platform engine application loads. There is one folder for messages that are used by all template sets.

Delegation directory

The delegation directory contains resources that allow customizing the web experience in Delegated Administration for Business Partners (DABP). You can customize the following resources:

• Translations: Customize key-value messages in multiple languages. Refer to the example translation.json.
• Logo: Customize the logo.png file.
• Favicon: Use the favicon.ico file
• Application theme: Use the palette.json file. Read more information about theming.

Create Git repository connection

1. Log in to the OneWelcome console.

2. Select the tenant that you want to configure styling for. This step is optional if only a single tenant is available.

3. In the top-navigation, select Switch to, then Configuration. From the side menu, select Self styling.

   

4. On the right of Git repository connection, select Edit and fill the connection details.

   

   Field	Description
   Remote location	The remote location to clone the Git repository must start with https://, and ssh is not supported.
   No authentication required	Enable this option when your GIT repository is publicly accessible. This option is disabled by default, which means that the Git repository is private and protected by a username and password.
   Username	The username for the Git repository.
   Password	The password for the Git repository. Instead of using a password, you can generate a GitHub personal access token.

5. Select Save.

Select reference

1. After completing the steps under Create Git repository connection, the synchronization window opens:

   

   Field	Description
   Synchronization mode	Allows selecting the synchronization mode. Development mode allows selecting branches and tags from the configured repository, but does not cache the data. Production mode allows selecting tags only, but caching is enabled.
   Reference	Specifies the branch or tag from which templates are fetched.

2. When the correct tag or branch is selected, select Save.

   The branch or tag is stored, and synchronization happens automatically.

3. After saving, the overview page is displayed:

   

The overview page shows the following information:

Edit connection

To edit the Git repository connection, on the right side of the Git repository connection header on the main page, click Edit.

Change reference

To change the reference, on the right side of the Synchronization header on the main page, click Edit.

Synchronize

To synchronize a Git repository, on the overview page, click Synchronize:

• During synchronization, the external resources (HTML/CSS/images) are fetched from the selected Git repository and stored on the server.

• After synchronization, the templates are uploaded to your environment. You can now start testing the templates, for example, by loading the login page.