Extra Help pages

A template that shows step progression of a task and allows personalisation of a step, text block or warning message

Overview

The Extra Help page template displays between three and five step icons with up to three anchor links each.

Below, on the left hand side, each step includes a text block and any associated help or related messages to the right hand side.

Example

My sickness Extra template page with personalisation for Hampshire County Council:-

Extra Help page template example for HCC

My sickness Extra template page with personalisation for Hampshire Constabulary (using the same page in sitecore):-

Extra Help page template example for HC

WCMS use

Content Editor

From the Content tree, navigate to the place you want to add the new page. Right-click and choose Insert, then HCC_Extra_HelpPage.

Extra Help page - adding the template to the tree

Give the page a name, following our standards for page names.

Update the Page title and summary and other standard fields as described under general page authoring.

Navigate to the Page metadata section and update the Keywords, Description and Tags fields:

  • Keywords - use words that don't appear on the page but are still related, for example, leave and holiday
  • Description - this can be the same as the summary field
  • Tags - use the arrow keys to move tags to the right hand side in the Selected field. There are four groups of tags you need to consider:-
    • Audience - employees, managers, volunteers, school-based staff, councillors
    • Organisation - HCC, HFRS, HC, OCC, OPCC, HCC Schools, OCC Schools, London Borough of Hammersmith and Fulham, Royal Borough of Kensington and Chelsea and Westminster County Council
    • Categories: staff information - ess, finance (and potentially sub tags)
    • System: IBC portal - use the form tags as applicable

Text block

Create a new Text Block item for each step but when you add it to the page, follow the Experience Editor guidance below as it needs to be inserted inside a Help Step first.

If you need text block items for more than one organisation then name them with their tag on the end, for example, sicknessoverview-HCC and sicknessoverview-HC.

Help Step

From the Content tree, navigate to common-content, Extra and Help Steps. Then find or create your folder to insert your Help Step.

Right click on the folder and choose Insert and then HelpStep. Give the step a name and once again if there is more than one organisation with the same step name, add a tag.

Navigate to the Content section and update the Heading, Icon and Links fields:

  • Heading - this will be your step heading that will appear underneath the icon
  • Icon - press browse and navigate, using the tree view to icons, extranet icons and then choose from a list of icons and choose Select
  • Links - you will need to come back to this step later as you will need to complete the Help Step anchor links section first. This effectively will tell the step it has an anchor link and will point to the relevant message on the page

Help Step message

From the Content tree, navigate to common-content, Extra and HelpStepMessages. Then find or create your folder to insert your Help Step Message.

Navigate to the Data section and update the Heading and Content fields:

  • Heading - this will appear as a heading 3 title for your message (or related field links)
  • Content - Choose Show editor and add the text for the message. Try to keep it short and concise. Choose Accept.

Help Step anchor links

Help Step Links are anchors that will appear below the related Help Step. They anchor to Help Step Messages.

If you have three Help Step Messages for step one then you will need three Help Step Links.

You can have four or more Help Step Messages but only a maximum of three links so be mindful of what order you want your messages to appear.

In Content Editor, expand common-content, Extra and Help Step Links. Then find or create your folder to insert your Help Step Links.

Right click on the folder and create a new link (templates/Content Templates/Extra/HelpStepLink) (the name should be all one word, all lower case and must match the same Help Step Message name).

Give it a name in the Link Text: field. This will appear as the anchor tag text below the Help Step.

Choose Insert link in the Link URL: section. Find the message in association with this link (common-content/Extra/Help Step Messages/). Press Insert.

Choose the link icon:

  • Alert will show a yellow triangle
  • Info will show a blue circle (usually for related pages)

Experience Editor

Once all common-content components have been built, highlight the page in the Content Editor tree and choose Experience Editor.

Press the middle rendering slot titled HCC_Extra_HelpPage_HelpSteps.

Press Add here.

Choose either HelpStep or HelpStepWithProgress depending on what page layout you have chosen:

  • HelpStepWithProgress means that the user has to follow the process from Step 1 to Step X in order to complete the task, for example, making an employee a leaver whereas
  • HelpStep means that the user only needs information from one particular step, for example, viewing leave quotas

Choose the existing content item you created in Common-content. Press OK. Press OK. This will add the step.

Each step has:-

  • A rendering slot to add your text block (HCC_Extra_HelpPage_HelpSteps_Content)
  • A rendering slot to add any Help Step Messages (HCC_Extra_HelpPage_HelpSteps_Warning)
  • A rendering slot to add any errors (We haven’t used this yet) (HCC_Extra_HelpPage_HelpSteps_Error)
  • A rendering slot to add any related pages/tasks (HCC_Extra_HelpPage_HelpSteps_Related)

To add the Text block - choose the rendering inside the step and press Add here. Choose Text block and press Select.

Choose the existing content item you created in Common-content (found in Extra). Press OK. Press save. Saving will load the step icon at the top.

Repeat the above process for other Help Steps and Text blocks.

Now add the Help Step Messages on the right hand side. Press on the 1st of three rendering slots (HCC_Extra_HelpPage_HelpSteps_Warning)

Press Add here.

Choose the existing content item you created in Common-content. Press OK.

Make sure that the order matches the anchor link order for that step.

Repeat the above process for other Help Step Messages.

Note: You can't preview these pages using Sitecore Demo.

Personalisation

Choose the Text block rendering you want to personalise. Press Create or edit personalization for this component (the icon that is coloured blue, red and grey) in the little pop up window.

Style Guide Personalisation - Icon

At the moment the page will be setup so that the organisations you chose in the Meta data earlier will see this page.

Press the plus icon and change 'Specify name…' text to any of the organisation groups (Police, Fire, OCC, OPCC or HCC).

Press Edit rule for that section.

In Search for a condition, type ‘role’.

Choose ‘where the current user is a member of the specific role’ so that it populates the Edit rule part of the window.

Press on ‘specific’ in the Edit rule section.

Choose ‘extra\HC Employee’ (or whatever organisation you are setting up a rule for) and click on the Add button. Press OK. Press OK.

Now press the … in the Content: area.

Find your personalised text block for that particular organisation. Press OK.

Do the same for any other personalised items.

In the Default area press the … and make sure the ‘normal’ text block item is selected. This means that if an organisation doesn’t have personalisation they will see this default content item.

Style Guide Personalisation - role added

Press OK and save.

You will notice a content, alert or related page item has personalisation if it has, for example, a 2/2 in the small Content pop up window for that item.

Style Guide Personalisation - applied with number

Personalisation preview

To test if personalisation has worked, type in the following text (in between the quotation marks) on the end of the hyperlink for the relevant organisation:-

  • For Hampshire County Council - "?roleName=HCC Employee"
  • For Hampshire Fire and Rescue Service - "?roleName=HFRS Employee"
  • For Hampshire Constabulary - "?roleName=HC Employee"
  • For Oxfordshire County Council - "?roleName=OCC Employee"
  • For Office of the Police and Crime Commissioner - "?roleName=OPCC Employee"
  • For Hampshire Schools - "?roleName=HCC School"
  • For Oxfordshire Schools - "?roleName=OCC School"
  • For Kesington and Chelsea - "?roleName=KAC Employee"
  • For Hammersmith and Fulham - "?roleName=HAF Employee"
  • For Westminster - "?roleName=WES Employee"

To make sure you are now viewing the chosen organisation, navigate to the Shared Service home page and look at the lead text 'Supporting you in your role at ...'. Now navigate to your new page and check it is displaying correctly for that organisation.

Personalisation rules

There are a few things to consider when working with personalisation:

  • If HCC Schools or OCC Schools are a rule then they need to be at the top of the list

Personalisation - same page but different organisation Steps and Messages

Example: If you have different Help Step Messages for HCC and OCC in a step you must setup:

  • two versions of the Help Step Message
  • two versions of the Step
  • two versions of Help Step Links which point to the correct message version

This is so the anchor link will point to the correct organisation message.

Once the Content Editor components have been created and setup, personalise all three in Experience Editor.

Hiding components - The above example is also relevant to if you have two or more organisations where they both contain the same step and content but only one includes a Help Step Message. You need to setup two versions of everything and then select the Hide radio button for the one that doesn't include the Help Step Message (as there is no message for this organisation there will also be no Help Step Link)

Login\Out page - Shared services pages

If users get automatically logged out after an X amount of idol minutes, this is where you can change the messages on a page they get directed to.

In Sitecore navigate to Common content\Extra\AD FS system pages.

Press either Login or logout page.

In the Data field ignore the first box called ‘Logged-in text’ (or ‘user-initiated logout text’).

Press Show editor for either ‘Not logged-in text’ for Login or ‘Automatic logout text’ for Logout.

This is where you can change the text of the message.

The button needs a certain part in the text which returns the users to the correct employee URL landing page. %2F is a backslash. The below code is linked internally to the ‘Extra\employee’ page.

<a href="https://extra.hants.gov.uk:443/Login?returnUrl=%2Femployee" class="full-width green" role="button">Sign back in</a>

The page this message is based on is located in Extra\Logout. Here you can change the Page title or the CustomStyles for the CalltoAction button (which is set as CSS/Extra/extra-access-page).

MVC.net use
Code
Version and status
  • current version
  • Concept