How to Customize the Appearance of a Form

In the How to Customize the Appearance of a Form tutorial, you will learn techniques for customizing the appearance of a form using a CSS class.

You should work through each section in turn to complete the tutorial.

The following points are illustrated by the tasks in this tutorial:

  • To customize the appearance of a form, you can assign a CSS class (cascading style sheets) to the form.
  • Within the CSS file, you will define a set of rules that determine the styles to be applied to components within the form.
  1. Opening the Business Process
    If you completed the previous tutorial, "How to Use Structured Data in a Form," the business process as you left it can be used as a starting point for the present tutorial. Instead, if you wish, you can begin this tutorial by installing the furnished solution to the previous tutorial, FormsStructDataSolution.
  2. Renaming the Project in the Project Explorer
    If you are continuing this tutorial directly from the previous one, the FormsStructData project will be open in the Business Studio Project Explorer. If you are beginning this tutorial by importing the solution to the previous one, the FormsStructDataSolution project will be open in the Project Explorer.
  3. Assigning a CSS Class to a Form
    A CSS class can be assigned to a form. The rules defined in the CSS file will be used to determine aspects of the appearance of the form.
  4. Setting a CSS Class at the Form Level
    There are three levels at which you can set a CSS class on a form. You can set the CSS class at the form level for the Record no-fault claim details form.
  5. Setting a CSS Class at the Pane Level
    Setting a CSS class at the pane level is much like doing so at the form level. As with the form, the General tab of the Properties view is used, but this time, it is the Properties view for the pane, not the entire form.
  6. Setting a CSS Class at the Control Level
    Setting a CSS class at the control level is much like doing so at the form and pane levels. As with those levels, the General tab of the Properties view is used, but this time, it is the Properties view for the control, not the form or the pane.
  7. Changing the Style of a Control Based on an Input Value
    Once you have defined various CSS classes, you can configure the form so that the specific class to be applied to a component of the form is based on a value input by the user. In this task, we will create a computation action, so that the background color for the Claim Amount control is determined by the value a user enters in the field.
  8. Verifying the Tutorial Solution
    You can verify the results of your tutorial by installing the tutorial from the samples folder in the product directory. Your project must look similar to the sample solution project.