Rule Template Views
A rule template view defines a visual presentation of the rule template to make it easy for the WebStudio user to define a business rule.
The Rule template view has three tabs Presentation, HTML File, and Preview to help you create an HTML form for the business rule.
Presentation
The View uses rule template bindings to define an easy-to-use form-like interface where the WebStudio user assigns values to the bindings, for example, threshold values. You can use plain text or HTML to define an input form. You can drag and drop the bindings into the Presentation section, or type them. The syntax for a binding is as follows (the closing tag is required):
<binding id="bindingName"></binding>
For example:
Require that all applicants have a minimum income of <binding id="minimumIncome"></binding>, a minimum age of <binding id="minimumAge"></binding>, and restrict the credit type to <binding id="creditType"></binding>
If the binding is associated with a domain model, the WebStudio interface displays the input widget as a drop-down list. Otherwise, an input widget of the appropriate type is displayed, for example, a check box for a boolean field.
You can also apply the styling to the input form by using the CSS class, JavaScript, or inline CSS.
CSS Class Styling
To apply the styling to the HTML elements corresponding to bindings, you can create a CSS class by using the following syntax:
RuleTemplateName_bindingID
For example, for the
Applicant_PreScreen
rule template and the
minimumAge
bindingID, the corresponding class name of HTML element is
Applicant_PreScreen_minimumAge
.
.Applicant_PreScreen_minimumAge { background: rgba(255,255,255,0.1); border: none; font-size: 16px; }
Inline CSS
You can add the style attribute with HTML styling options to the binding tags. This applies the specified styling to the binding. For example:
<binding id="minimumIncome", style="height:100px; text-align:center"></binding>
JavaScripts
You can also apply styles to elements using JavaScripts. JavaScripts uses the BindingID to form a ID which the script uses to link style to the binding. In the script, apply the style to a particular item using the following syntax:
%RTIName%_bindingID
where,
%RTIName%
is replaced with the business rule name in the run time
For example, to apply blue color to
minimumAge
binding, you can use the following code in the script:
document.getElementById("%RTIName%_minimumAge").style.color ="red";
The following sample code displays all three method of styling applied to the presentation text:
<head> <style> .Applicant_PreScreen_minimumAge{ height : 100px; text-align : center; } </style> <script> try { document.getElementById("%RTIName%_minimumIncome").style.color= "blue" document.getElementById("%RTIName%_minimumAge").style.color ="red"; } catch(e){ console.log(e); } </script> </head> <body> Require that all applicants have a minimum income of <binding id="minimumIncome" ,style="height:100px; text-align:center"></binding>, a minimum age of <binding id="minimumAge"></binding>, and restrict the credit type to <binding id="creditType"></binding>, testing area for string <binding id="testingTextArea"></binding>, testing check box <binding id="testBoolean"></binding> and testing date <binding id="testDate"></binding> . </body>"/>
HTML File
You can also use an HTML file for business rule form. In the HTML file you can use the HTML styling for bindings using the same syntax as used on the Presentation tab.
Preview
Show preview of the business rule form created in the Presentation tab. The Preview tab shows preview of only plain text form and not for HTML styling. Thus, you cannot view the preview for the uploaded HTML file or applied CSS and JavaScripts.