Extensions : A First Style Extension

To better understand the process of creating, testing and delivering a style extension, and how it relates to the Interview experience, let’s start with a skeleton example. You have been tasked with creating a text input for the Interview, which has a different behavior to the normal one. For this short example, you could simply create a new Project by selecting the Project tab and clicking New Project.

1. Before doing anything, check that the behavior you are looking to implement is not already configurable using the Styles dialog on the Interview tab. For example, there are a number of options on this page, that allow us to change the font, color and so on:

Style Extension - What to do

2. Click the Custom Files button

3. Notice the warning. If you are developing for a public sector organization or for an organization that needs to meet certain accessibility standards, you should review the warning and check that any extension you create meets the standard Web Content Accessibility Guidelines (WCAG) mentioned. You can find out more here: https://www.w3.org/WAI/standards-guidelines/wcag/.

4.In the screenshot above, the Project is called Style Extension. Notice that the folder is called interview-theme/resources. This folder can contain your Extension files, but it also can contain other resources for your Project, notably images (and a folder is already present with that name).

Adding a file is as simple as adding a new file to this folder. You can choose to add a new file manually, or you can use a code generator such as the one available from https://theopahub.com which can help you quickly create standard files to work on.

In this, our first example, let’s create a new Text File and rename it example.js. Even though it is concerned with styling rules, all extensions are always driven by a JavaScript file. But before you add the file, a word about the file structure.

Custom Style Extension Template

Most Extension creators like to use template files, since all extensions have a similar structure. You might use this sample styling template as a general starting point for self-study purposes. Over the following pages, you will implement several examples of Custom Styling Extensions; each time you will construct a file based on a template similar to this.

OraclePolicyAutomation.AddExtension({
style: {
objecttype: {
className: "css class name",
errorclassName: "error css class",
propertyname: "property value"
}
 
}
});

In the template shown above, there are four main areas that may be modified:

Object Type
The Object Type identifies the element you are trying to restyle. This could be the Interview content, the “Next” button, or a specific type of element such as a Calendar input Control.
Class Name
The style details (color, background, or indeed any Cascading Style Sheet content) are in most cases based on a standard CSS file with different classes.
Error Class Name
The style details to use when a control is in an error state (for example, a user has entered an invalid date).
Property Name
In simple cases, where only one aspect is changed, in certain controls it is possible to change the value without a separate style sheet. For example, in order to change only the background color of an element, it is not required to create a style sheet, you may reference the property directly as you will see in a moment.

In the case of this first walk-through, you will construct a Style Extension that changes the look of one or more text input areas in your Project.

Using the code below as your guide, add text to your blank example.js file.

OraclePolicyAutomation.AddExtension({
style: {
textInput: {
 
style: {
color: "darkblue",
backgroundColor: "lightgrey",
fontSize: "14px",
fontWeight: "bolder"
}
 
}
}
});

Notice the following key points:
1. The Oracle Policy Automation AddExtension object allows us to pass details of an extension to normal behaviour, to “register your extension”
2. The style key indicates that it is a styling extension, and you will change text color, background color, font size and weight properties in your extension
3. The textInput key tells Oracle Policy Automation that you wish to extend textInput styling
4. The entire code of your extension is a JavaScript object

Build a First Example Style Extension Project

In order to test your work, you will need to add some content to your Oracle Policy Automation Project. In the Data tab, create three attributes according to the example below (note there are two text attributes and one number attribute).

Style Extension - Attributes for Example

Make the following changes to the Interview tab of your Project

  1. Click New Screen on the Interview Tab
  2. Drag the New Screen so that it is the first in the vertical list
  3. Double -click the title and change it to “Customer Management”
  4. Click New Input
  5. Double-click each attribute until they are all visible on your Screen

Once these simple steps are finished, your Interview should look like the one below. Use the bullet points in the screenshot to make sure you have the same result.

Style Extension Interview

So you are ready to test your Style Extension. Start a new Debug session by clicking Debug in the top right hand corner of Oracle Policy Modeling. If you have followed the steps, you should see the following:

Style Extension - result

You are perhaps surprised at the result as to why both of the first two inputs are styled. That’s because the underlying HTML tags are the same. In a later example you will find out how to style numbers differently to text, and so on. There are many more options available to style developers.

But that’s it – you now have a functioning Style Extension. Enjoy, until next time!