Point - UI builder (The Point skinning tool)

Introduction

UI builder is a supporting application which enables styling of Point to match your brand. In short, it is an application which allows us to rewrite the CSS for Point

Important to note

UI builder is an advanced application, meaning it is uncommon that system owners gain access to edit in here. The UI builder is a technician tool which are (by exception) given access to for advanced users.

What this means is that it may cause you to break certain styling items in your portal. If a Papirfly designer or Solution specialist sets this up for you during onboarding or on request, we can ensure that things works as intended, but if you as a system owner start working in this tool, we are no longer able to directly support on the UI builder.

What This Guide Covers

• How the UI Builder Works: Understanding the basic functions and features.
• Steps for Backup: How to back up your current settings.
• Reverting Changes: How to undo any changes you make.
• Key Terminologies: Essential terms and concepts to help you navigate and use the UI Builder effectively.
• Troubleshooting topics: How to resolve the most common issues.

Note: This guide will not cover every option available in the UI Builder due to the vast number of features.

Prerequisites

To use the UI Builder effectively, you should have knowledge about the following:

• Page Admin: Basic knowledge of managing pages.
• Editing Pages: Ability to edit and manage page content.
• Page Template Builder: Familiarity with building and using page templates.
• Basic CSS Coding: Understanding of CSS or at least familiarity with CSS values and styling.
• Web and Design Terminology: Knowledge of common terms like hex colors, pixels (px), em units, etc.

How to access UI builder

Depending on your setup, there are two ways to access UI builder

1. Direct link

Since the tool is not originally intended for system owners, the tool is not set up in the normal user interface. Some have received a direct link they may access OR a link put in the Point navigation, only accessible to administrators.

2. Trough the admin floating menu

Click the "superadmin" symbol to open the "super admin" application.

Use the cog on the right hand side which is connected to the portal you wish to update.

In the top right corner, you find the button for the UI builder.

Finally, you need to select which skin you wish to edit. If your portal have multiple, make sure you select the correct one. If you are uncertain, contact your CSM, solution specialist or support for assistance.

The "default" skin is not in use.

This is only used when doing new setup and must not be used otherwise.

This is the one we will use in our example. Click it to access the skin.

Note: Do not use the bucket (delete) as this may break styling and potentially cause your portal to be unusable.

The UI builder:

There is a lot to understand when first opening the UI builder. Below you can find a breakdown of several topics. Make sure you understand each section before you start making changes.

Each input field refers to an individual CSS value. Supported values depends on which input you are interacting with. If you wish to investigate supported values, you might find good guidance here: https://www.w3schools.com/

Most input boxes supports using "references". If you wish to use primary color on several areas, copy the "key" for primary color and paste it in where needed.

This is only a portion of styling used in Point. If you have questions about additional styling options, contact your CSM, solution specialist or support for help. Note that not all styling options will be made available. Several styling options are prohibited as they are very likely to break something.

Before you start

There is no staging area for your changes and there is no way to "revert" last changes, meaning it is important you have a careful approach when working in the UI builder.

Always create a backup. For a complete backup, you download a "json" file from two different places.

1. Click general settings, then go to the 3 dots and select "export variables".

2. Click brandbook components, then go to the 3 dots and select "export variables"

If you mess up or wish to roll back, go to each of those two spaces and "import" variables and save (see about saving below).

General settings:

This section functions as a "reference" area. The idea is that you make a change here and it is automatically updated in several other places.

Example: Colors (example is for illustration purposes only as your solution may have used these values and references differently)

We set primary color under "general settings". This is then automatically used in the "footer" component. (under brandbook components) using the "$primary-color" value.

This is why you see more broad terms like "layout", "colors", "typography" etc, because these sections group up all behavior into one section and then distributes them across the different components.

General settings are broken down into the following categories:

Layout: Boxes and shapes. How things stack on phones etc.

Colors: Structure for storing and using colors across the application. Colors stored in here are also accessible in the color palette when editing pages inside Point.

Shadows: Grouping of shadow settings on different elements in the application.

Typography: Text configuration (font usage, sizes, weights, spacing etc) for all the different text styles in the application.

UI elements: Configure buttons, input fields and other interaction elements.

Fonts: Additional fonts added to the system. The adding of fonts needs to be very exact. Contact CSM, solution specialist or support if you have questions about adding fonts.

Icons: Advanced feature for managing icons across the application. Contact CSM, solution specialist or support if you have questions about icons.

Google maps: Advanced feature for styling the geographic locations filter view. 

Save changes: (two steps) First click the "save & update skin" at the top.

Then go to "brandbook components" and click "save & update all components".

A pop-up will appear which shows the progression of saving. Wait till all applications are fully saved before continuing. This is to update any $value references. If you don't do this step, the changes will not apply to some of the components.

Brandbook Components

This is where you may detail styling for each component.

All these components are referring to individual components which you may manage in the "page template" builder. Any changes done here will be custom for that specific component.

Save changes: Click the blue "update" button for the component you are currently editing.

Confirm your changes

Once you have saved correctly, open a Point page and confirm your changes. It is recommended to do this using a separate window so that you can quickly jump forth and back and adjust.

Troubleshooting guide:

I messed up and something looks bad / broken. I need to revert my changes.

If you need to revert your changes, you have two options:

1. Change Individual Values:

   • Go back to the UI Builder and change the individual value back to its previous setting.

2. Load a Backup:

   • Load the backup (refer to the backup section for instructions on how to create a backup).
   • You only need to revert the section you worked on. For example, if you only made changes in "general settings," you only need to load the UI variables for that section. Remember to save in both areas to see the effect.

There are no other ways to revert changes. 

The revert button

The revert button does not change the value back to your previous custom value. It reverts to the "default" value, which means your custom values from before may be lost.

Disabling colors

Disabling colors can cause issues. Most color options support being disabled in the "color palette," but not all. Disabling an unsupported color will cause the saving of your skin to fail (resulting in a big red error pop-up). If this happens, go back and enable the color again, then save.

I get a big red scary error when saving

This usually occurs when an unsupported value is added. Review your recent changes and test different inputs. Note that there is limited support for inputs, so not all values you expect may be allowed.

My (editor) color palette does not update inside Point

The color palette (used for text marking, background colors, etc.) may be slow to update due to caching. To see changes, log out of the application, close your browser completely, and reopen it. The changes are made, but your browser may take time to update its cache.

My changes don't show up

If you've made changes in the "general settings" tab, remember to also "save and update all components" in the "brandbook components" tab. This action flushes out all $value references with the new updated values.

If changes still do not show up, double-check that you made the changes in the correct spot.

If you made changes in the "general settings" and expect them to show up on a component, ensure the component settings use the $value reference. Avoid putting values directly on components (when ever possible) as it requires manual updates for future changes.