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.

Procedure

  1. If it is not already open, open the Notification of claim business process by expanding FormsAppearance > Process Packages > ProcessPackage.xpdl > ProcessPackage > Processes. Double-click Notification of claim to open the business process in the editor view.
  2. Right-click the user task Record no-fault claim details and click Form > Open. A warning will pop up to inform you that "the customized form will no longer be automatically kept in sync with the activity interface." This is because opening a form, rather than simply previewing it, causes the default form to become a customized form. For this tutorial we will be using a customized form, so ignore the warning and click OK.
  3. Click on the form, in the margin outside of any element on the form, so that the Properties view is displayed for the entire form. Or, if you find it a more certain approach to selecting the entire form, you can click the name of the form in the Outline view:

    When the form is displayed in the Editor view, the name of the form appears at the top of the Outline view.

  4. In the Properties view for the form, click the Resources tab.
  5. Click the plus sign (+) to add a resource. The Pick Resource dialog opens, displaying a list of the resources currently residing in the Presentation Resources folder, including CSS files, JavaScript, and image files, if any.

    In this case, the FormsAppearance project includes a CSS file, claims.css, already in the Presentation Resources folder. This is the file we will be editing throughout this tutorial.

  6. In the Pick Resource dialog, click claims.css and click OK. The CSS class file has now been added as a resource to the Record no-fault claim details form. The definitions it contains will be used to render the form in HTML.
  7. Double-click the claim.css file in the Project Explorer to open it in the editor. As furnished, the .claimtheme class defines a background color, border style, border width, and padding. 
    .claimtheme {background-color: #DDFFDD; border-style: solid;
     border-width: 3px; padding: 4px;}
.claimtheme .pane-label {background-color: #BBFFBB;}

    In the next task, we’ll see what happens when this theme is applied at the form level.

Next topic: Setting a CSS Class at the Form Level
Previous topic: Renaming the Project in the Project Explorer