Steps to Create Basic Style Profile in Nintex K2 Five (5.6)

In the latest updates of Nintex K2 Five (5.6), the Style Profile Designer Developer Tab has been introduced. Style profiles allow you to easily change the colours of your forms by creating a basic style with three main colours. In addition, you can also configure advanced colours for K2 SmartForm controls such as text boxes, sliders, uploaders, tooltips, buttons, menus, charts and more. The themes are now called legacy themes. There are many other properties that you will see in your form.

This article will help you understand this new feature of Style Profile and how it can improve the design of your existing Smart Forms. The new style profile provides a visual design experience for creating custom themes and styles that can be applied to any form. This allows you to standardise the look and feel of all applications to comply with the company’s brand guidelines or create a different look for each application built.

Simplifying Forms Designs with Style Profiles

When researching how Nintex K2 developers design Nintex K2 Smart Forms, we discovered the following trends:

Designing individual controls is tedious and takes too much time to make each form look consistent.

Creating custom designs was possible but required a lot of CSS code and did not conform to modern CSS best practices.

Smart Forms branding is critical to the widespread use of automation applications in organisations, especially with external users.

To address these issues, Nintex added Style Profiles to allow form designers, and UX /UI designers, to easily design forms using modern standards like LESS variables. Nintex has taken the time to revise and modernise the CSS and has created variables that affect all Nintex K2 Smart Forms controls available in the designer. Furthermore, in the 5.6 release, Nintex focused on the colour-related variables that allow you to easily set main colours or control the colours of each control type in more detail.

Steps to Create Basic Style Profile

In this scenario, we will create a Smart Form to which we will then apply a basic style profile and change the main colours. Finally, we will test the form to see the difference in styles.

Step 1: Creating a Form

In K2 Designer, create a form with one item view to showcase the use of the style profiles feature:

Create a new category for this demo and create an item view.

Fill in this item view with controls that you would like to have. In this example, we have used  “Employee name” as a text box, “Start date” and “End date” as calendars, “Note” as a text area and finally Cancel and Save buttons.

Right-click on the created Item View and select Generate Forms.

Your design canvas should look like the image below. (Depending on your K2 version and the theme that you have selected, your form may have a different style and colour)

If you run the form without Style Profile. The form will look as in the picture below:

Step 2: Create a Style Profile

From the K2 Designer, right-click the Style Profile category and select New Style Profile.

Click on the main accent colour and then select a colour from the colour wheel by clicking and dragging the cursor in the selection area to highlight a colour. This is the colour you normally use for your main mark colour.

When you change the main colours, you should consider the following:

• Main accent colour: This colour applies to all hyperlinks, highlights, and main buttons in your form.
• Content background colour: This colour applies to the form background and window content.
• Panel background colour: This colour applies to views, pop-ups, and panels.
• You can also click on the Advanced Option on the right-hand side to change the colour of text, labels, backgrounds etc. Once done click on Finish and Check In

Step 3: Apply the Style Profile to the form

• Once the Style Profile is created, right-click on your form and click Edit.
• When the form is open, select the Style Profile option on the right and choose the Style Profile created in the previous step.
• Then on the Advanced Option deselect the Use Legacy Theme checkbox and click on Finish.
• Test the solution by running your form to see the new Style Profile applied.

We can see the 3 colours have been applied to the form.

Some useful tips

When you apply a style profile to a form, it may behave differently from what you expect. Take note of the effect other settings have on the behaviour of your form at runtime:

• You must deselect the Use Legacy Theme form property. If you don’t do this, the legacy theme will apply at runtime.
• Any properties set in the Form Designer take priority over the style profile. If you use the form’s properties to set a page or form background colour or configure the style in the Format property, those will apply to the form.
• If you use the form’s properties to set the form to a dark colour, the controls inside the form will not make themselves lighter to be legible on a dark background. It is advised to only use the advanced colours to configure the style and not mix the style profile with other settings in the Form Designer as the expected behaviour may differ. Either use the form properties to style your form, or configure a style profile.

If you have any questions on the above or any other questions about Nintex K2, get in touch with our K2 experts!