Self-service portal

Empower stakeholders such as elected or legal representatives to register and manage their casework on-line. Users can choose to log in to log new issues, track existing ones or escalate, as appropriate.

Accessing the self service portal

Access the portal using the following URL:

http://portal.icasework.com/services/youraccountid

Authentication

Out of the box, self service users can log in using their existing Google account, their Facebook account, their YAHOO! account or any other OpenId provider. You can select providers you wish to support through Self Service Preferences under General Preferences in the Administration menu. Alternative authentication mechanisms that can be enabled upon request include:

Government Gateway (UK)
Scottish National Infrastructure
OpenId (supports a range of social networking logins including Google, Yahoo, Twitter, Facebook and Windows Live)
iCasework login

Styling the self service portal

Your self-service portal can be styled to blend in seamlessly with your existing website. The following sections explain how to set up style templates to achieve this. It explains how templates may be customised using HTML and CSS, and how the form elements themselves can be customised by amending the associated stylesheet.

Creating style templates

Style templates may be created through the Self service style templates option under General Preferences in the Administration menu. The contents of each template may be stored in UsefulFeedback! or, preferably may be stored on your own web site and referred to by URL. The latter approach will make it easier to ensure style templates stay in line with your web site design but you may wish to utilise the former approach for testing purposes.

When you access the editor for the Default template listed, you will see a simple HTML document with a number of $$variables$$. These variables pull in details or hyperlinks for various purposes. Here is an example of a very simple template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
$$metaData$$
<link rel="stylesheet" type="text/css" href="$$resourcepath$$css/icasework.css"/>
<title>
$$PageTitle$$</title>
</head>
<body onload="$$onLoad$$" onunload="$$onUnLoad$$" >
$$details$$
</body>
</html>

Variables that MUST be included in the <head> of the html template

$$metaData$$ - pulls in various metadata tags when rendered
$$PageTitle$$ - pulls in a different title depending on the page you are on
$$onLoad$$ and $$onUnLoad$$ - these variables should be added to the body tag

Variables to go in the body of your html template

$$details$$ - place this tag wherever you want dynamic content served by UsefulFeedback! to be displayed
$$customerId$$ - once the customer has logged in, this will show their customer reference
$$customerName$$ - once the customer has logged in, this will show their name
$$login$$ - shows a hyperlink for users to login if currently not logged in or logout when currently logged in
$$loginURL$$ - displays a URL for users to login if currently not logged in or logout when currently logged in
$$loginLabel$$ - displays "Sign in" if currently not logged in or "Sign out" when currently logged in.
$$setupDelegation$$ - Allows the customer to delegate access to another user
$$useDelegation$$ - Allows a customer with delegated access to act on behalf of another user

Navigation variables

These variables are available in two formats: - $$variable$$ and $$variableURL$$. The first pulls in an entire hyperlink, whilst the second pulls in just a URL, allowing you to customise the text associated with the link. Note that if you use a variable without the URL suffix, it will not show the link unless the user has logged in. Also, links without the URL suffix automatically adopt the MenuItem class when not selected and the CurrentMenuItem class when selected, allowing the current menu item to be highlighted through your stylesheet.

$$home$$ - allows the customer to navigate back to the portal start page
$$customerCases$$ - allows the customer to view all their cases
$$customerCasesOverdue$$ - allows the customer to view all their overdue cases
$$customerCasesChanged$$ - allows the customer to view all their cases that have recently been updated
$$customerCasesAwaitingOutcome$$ - allows the customer to view all their cases that are awaiting an outcome
$$customerCasesRejected$$ - allows the customer to view all their cases that have been rejected
$$customerSavedTransactions$$ - allows the customer to see forms they have not yet submitted
$$customerRegistration$$ - allows the customer to change their registered details
$$customerSentTransactions$$ - full audit trail of all forms completed by the customer

CSS Stylesheet

The template example given above links to the standard iCasework stylesheet for UsefulFeedback! ($$resourcepath$$css/icasework.css). This stylesheet governs the display of HTML elements served by UsefulFeedback! You can replace it with your own version to ensure complete compatibility with your web site. Please refer to the contents in the default icasework.css stylesheet for details on the classes defined.

Adding images and external links

You may, of course, want to add images or links to pages that sit outside UsefulFeedback! You can hard code these at will into the template, but please bear in mind that you should use the // prefix instead of http:// when embedding an external resource. This is to ensure that when the page is viewed over a secure connection there are no insecure elements pulled in. Primarily, this will apply to images, stylesheets, and javascript files, though any other embedded elements (video, sound etc) should also be treated this way.