Documentation | Form Design

Form Design

download

Why make forms a great user experience?

You can design process flows and make them “come alive” as web apps using WMS

The wonderful process flows you create won’t “feel” wonderful if they look clunky.

There is styling for WMS web forms in line with the eims.biz website that you can use to “beautify” your processes and make them look and feel as good as they really are.

There are beautification templates for each webplatform.

In Asset Manager you will find 4 Form templates:
- Accordion
- Collapsible
- Side by Side
- Clickable tabs
In Asset Manager you will find 3 Help templates:
- Big-fat
- Collapsible
- Grid
In Asset Manager you will find 1 email template.

Each template is in html format, with built-in instructions to tailor it to your needs

As an example we have implemented all of the above in the “Holiday Request” process on EIMS’ webplatform.

Note: If you are working on any other webplatform, ask support to supply you with beautification templates customised to your webplatform

Beautification Templates Example - Holiday request: Process diagram

1. Start form

2. Approve Holiday Request

3. Add Holiday in Timesheet (same for each BU)

4. Send Outlook Invite to Manager

So, let’s see each template type…

‘Accordion’ form template

Function

Click the arrow on the banner heading to see the contents of that section only.

Purpose

So you don’t have to scroll to find the open section. With ‘Accordion’ format, only one section [the section you’re interested in] is open at any one time.

What you can customise

Colour* of banners
Text in banners
Icons (upload into Asset Manager first)
The “Check mandatory […]” banner text can be customised or removed if not required

Then just add content in each section as normal.

‘Collapsible’ form template

Function

Click the arrow on the banner heading to see the contents of that section. Multiple sections can be in the expanded state simultaneously.

Purpose

To maintain backward compatibility with the existing ‘collapsible’ form style.

What you can customise

Colour* of banners
Text in banners
Icons (upload into Asset Manager first)
The “Check mandatory […]” banner text can be customised or removed if not required

Then just add content in each section as normal.

‘Side by Side’ form template

Most useful where there are not many actions required from the user, but they need to see previously entered info to be able to complete their action(s)

Style guide: Context objects should display beneath text labels.

What you can customise
Colour* of banners
Text in banners
Icons (upload into Asset Manager first)
The “Check mandatory […]” banner text can be customised or removed if not required

Then just add content in each section as normal.

‘Clickable Tabs’ form template

Most useful where there are many sections of data or actions required from the user. So, in effect where the form can be compartmentalised to improve the user experience as you will allow them to click to move to sections instead of scrolling down a single form and expanding/collapsing sections to see content.

In summary, large forms are broken down into manageable chunks = tabs, allowing the user to navigate to the tab which is relevant to their activity and have access to the pertinent information.

Function

Break down form sections into tabs so that users can see the contents of that section only, but within a tab.
At run-time, users can click on any tab to display the contents of that tab (open one tab at a time)

Purpose

So you don’t have to:
- scroll to find a specific section of a large form
- open content in each section, as it is open by default in each tab

What you can customise

Name of each tab
Number of tabs in the WorkItem
Colour* of banners (can also be removed if not appropriate for form)
Text in banners
The “Check mandatory […]” banner text can be customised or removed if not required

Then just add content in each tab as normal.

‘Big-fat’ help template

Modern layout for help information

Standards for use: One or more paragraphs consisting of a big headline followed by detailed paragraph text and a evocative image to the right

Template Images are in Asset Manager

What you can customise

Colour* of banners
Text in banners
Images (upload into Asset Manager first)
Number of sections (header & text)

‘Grid’ help template

Useful where multiple topics can be effectively described in small blocks of text.

Can be used in blocks of 3

Each block consists of evocative image, heading, and body text.

‘Collapsible’ help template

Function

Click the grey sub-headings to expand and collapse help sections [similar to ‘Collapsible’ form function].

Purpose

Most useful where extensive help content is needed to guide the user to best complete their action(s)

What you can customise

Colour* of banners
Text in banners
Icons (upload into Asset Manager first)
Number of collapsible sections

Automated email template

Purpose

Make your automated emails & notifications look slicker and more compelling

Usage

Tailor the heading text
Add content as needed

Recap

Templates follow the new EIMS style

Customisable elements of templates

Banner colour
- Standard colours for EIMS (brand guidelines) are embedded in the template
- Before you use these templates on another webplatform submit a support request so IT can code the relevant brand and style elements, otherwise you will have to add custom html to each and every banner.
- Always respect brand guidelines for the webplatform you are working on
Banner Text
Icons and images (in EIMS Asset Manager so they’re “always-on”)

More advanced customisations follow…

How to customise forms

Template HTML instructions

Instructions are stored in UPPERCASE comments within the code (Where reasonable to do this)

To customise Banner text

Type straight into the [header] banners as per instructions on bar!

Same applies to other banners, such as the “Check Mandatory […]” banners:

To delete a “Check Mandatory […]” banner

Highlight the banner (to find it easily in the HTML tab)

Delete everything from

To

Go back to the design tab to confirm the banner is correctly deleted

This is the section of HTML that you must delete:

To change the banner colour

This needs to be done in the html. Just highlight the text in the banner (to make it easy to find in the html). We have added a simple instruction to the code to guide you.

Change the current colour to the required one...

Note: You can customise colours further by adding colour code to the html e.g. <div class="panel-heading" style="background-color:#ffea00;"> or create a new class

Template layouts: Tables

These layouts (grids, columns etc) are set up as tables

Delete each table you do not want as shown in the animation below:
Make sure your cursor is in the first cell of the table

Note: To delete extra lines after removing the layout tables First: make sure your cursor is in the correct cell, then hit Backspace

Deleting rows in forms

Delete rows individually* as shown in the animation:

Delete table rows or line breaks 1 by 1.

If you delete multiple rows the whole table will disappear (as these are designed as tables within tables)

If you delete a table by mistake, just undo (control Z) and the table will re-appear, then delete the rows 1 by 1.

Adding rows

Format rows 1 by 1.

Label formatting does not carry over into added rows (the label formatting is a property of the row)

To keep the same label format across rows copy content from cell above then customise.

If you find it easier to work in html you can copy the row which will automatically include the text format

Customisation best to leave to the end…

Accordion/Collapsible formats: To pre-collapse sections

This is what your html & form will look like once you have made these 2 changes

Button on banner is aligned with action >
- User will click to expand
Nothing is immediately visible under the banner
- Correctly collapsed

Using only 3 blocks in the grid help file

Best practice: Keep in blocks of 3 to keep the grid structure

Highlight text in the second row of blocks in the grid to easily find section in the html

Delete html from

to

Here’s an example of how you can use 3 blocks

Using colours in blocks in the grid help file

To highlight the entire block:

Add style code to the block div class section container section. Examples:

Green: style="background-color:#9ef8c0;

Orange: style="background-color:#fcd39f;

To change the colour of text in header

Add style code to the h1 section:

Adding more sections to a form

Copy from start of section to end of section

Paste after end of section

Find toggle and number sequentially:

e.g. <a data-toggle="collapse" href="#collapse2"> change to to 3

Find div id for panel class and number sequentially:

e.g.<div id="collapse2" class="panel-collapse collapse in"> change to 3

Repeat as many times as needed and continue to number sequentially

Adding background colour to cells (read-only effect)

Example of standard html

What needs to be added to change cell colour <td> & text font colour

Add to <td section bgcolor="#A7A7A7"
Add after <span class="contextObjectLabel"> section <span style="color: #ffffff;">

Need to know for ‘Side by Side’ format

Length of the separator between the 2 columns is controlled by the 1st column (column on the left hand side)

If the number of rows you need in your first column is smaller than the number of rows used in the second column just match the number of rows and space the content

Number of rows between the 2 columns needs to match for the separator to be visible until the last row

When you add context objects/data fields to the right hand side of the form, the maximum width you can use for it to render correctly is 300 px.

See settings in the image.

Troubleshooting

Issues you might come across & how to address…

Where you will find all the html templates

In ASSET Manager:

filter by one or more relevant tags: Beautification, Email Template, HTML Template, Form Template, Process Designer

Other Tags given to these assets as appropriate: Beautification, Email Template, HTML Template, Form Template, Process Designer

These templates are not Public Assets

Where you will find all the html templates

In ASSET Manager:

filter by one or more relevant tags: Beautification, Email Template, HTML Template, Form Template, Process Designer

Other Tags given to these assets as appropriate: Beautification, Email Template, HTML Template, Form Template, Process Designer

These templates are not Public Assets