Global TechHubHome
Introduction
We can create a theme to provide common
styling to a set of coach views. Creating a theme consists of assigning values
to a set of theme variables. By default, a new process application uses the BPM
Theme because it contains a complete set of variables that the controls in
Responsive Coaches toolkit use. If you want to create your own theme and use
any of these responsive controls in your process application, use the BPM Theme
as your starting point. You can then extend your theme by adding custom
variables and modifying the BPM variables. The BPM variables start with a bpm
prefix.
Implementation
Step 1: Select Create a new Process App in Process
Designer. Give the name as ‘Coach and Coach
Step 2: Open the
Process App, which we have created in above step. In the library, click the
plus sign in the User Interface category and then select Theme.
Step 3: In the New
Theme window, type the name of the new theme as MyBPM Theme. Select whether you want to copy an existing theme from
the current project or dependent toolkit or import a theme. I have selected
here Copy an existing theme and drop down selected BPM Theme (System Data).
After you click Finish,
the editor opens the new theme.
Step 4: In the
theme editor, assign values to theme variables. The value can be a specific
value, a formula, another variable, or a combination of these types. For
example, @bpm-neutral: #586464
defines the value to a specific color while @bpm-link-color:
@bpm-color-primary; defines the value with the value of another variable.
Ø In
the Design page, change the value for one or more variables. Many variables
have a swatch that you can click and then choose a value from a picker. The
example controls update to display the new values. If you hover over a control,
you can see the specific variables that affect that control and its current
values.
Ø
In the Source page, assign a value to each theme
variable that you want to change. If you have custom coach views that you want
to add dynamic styling to, add variables for that styling. The variables are in
Less format:
@variableName:
value;
Ø If
you want to display a custom theme variable in the Design page, add
metadata like the following example:
//|EM|{"group":"PREVIEW_GROUP_BASE_SETTINGS","order":"010020","type":"color"}|DE|@bpm-neutral-darker: #2d3737; //|EEM|
Ø The
group is the name of the category that contains the variable. In the
example, PREVIEW_GROUP_BASE_Settings is a key to a value in a
localization resource (Base Settings) but it can be an ordinary string.
Ø The
Design page and the Source page react to changes made in the other. For
example, you add the following variable to the Source page.
//|EM|{"group":"My Group","type":"color"}|DE|@my-color: #ff0080; //|EEM|
Click Save to Finish
Editing.
Ø If
you go to the Design page, you can see a My Group category that contains a my-color variable.
Conclusion
It can take some time to generate CSS code
based on the updated values in the theme definition. For this reason, a delay
might occur before Process Designer uses the new values in the theme
definition to display coaches and coach views that use that theme. At run time,
the CSS code is already generated so that no delay occurs.
Download
S. No
|
Name
|
Size
|
Download
|
1
|
400 KB
|
Download
|
|
2
|
Coach_and_coach_view_examples_V1.0.twx
|
6.5 MB
|
Download
|
Comments
Post a Comment