(Example) Use Custom CSS in an eForm

This example shows how to create and use a custom CSS snippet that changes the look and feel for the eForms in an application.

Background and Setup

Other Examples

Prerequisites

Good to Know

  • This example shows how to create and use a custom CSS snippet that changes the look and feel for the Employee Exit Checklist Request form. You can use the same CSS file to chage the look and feel for all other forms in Employee Exit Checklist app.
  • This is a simple example. It is not intended as a real-world use case.

Result

When you add the Employee Exit Checklist app from App Store to your App Builder, and open the eForm, the form looks like this:

Employee Exit Checklist Preview
When you complete this example procedure, the finished eForm looks like this:

Employee Exit Checklist Final

Step 1: Create a CSS File

Create a CSS file in eForm Builder.

How to Start

  1. Click Build Apps Build Apps icon.

    Build Apps icon
  2. On the Application Explorer screen, on the My Application pane, click Employee Exit Checklist > Processes > Employee Exit Checklist > Forms > Task Forms > Employee Checklist.

    Employee Exit Checklist

Procedure

  1. On the eForm Builder screen, click CSS CSS icon > Shared CSS Shared CSS icon.

    Employee Checklist
  2. On the Shared Form CSS screen, click Add.

    Shared Form CSS screen
  3. On the Create Style Sheet screen, in the File Name field, enter Human Resources Form Style.

    Create Style Sheet screen
  4. Click Next.
  5. For the CSS content body, add this CSS snippet.

    To get the CSS class names from the Employee Exit Checklist form, refer to How to Get CSS Class Names for an eForm.

    /*Heading*/
    .Heading-Style {
      text-align: center;
      background:rgb(150, 96, 183) ;
      border: 2px solid rgb(230, 234, 225);
      border-radius: 91px 1px 93px 1px;
      color: rgb(255, 255, 255);
      font-family: "Times New Roman", Times, serif;
      padding: 10px 10px;
      font-size:24px;
    }
                
    /*Sub Heading*/
    .Sub-Heading .number {
      background: rgb(150, 96, 183);
      color: rgb(255, 255, 255);
      height: 30px;
      width: 30px;
      display: inline-block;
      font-size: 0.8em;
      margin-right: 4px;
      line-height: 30px;
      text-align: center;
      text-shadow: 0 1px 0 rgba(255,255,255,0.2);
      border-radius: 15px 15px 15px 0px;
    }
                
    /*Footer Buttons*/
    .popActionButtons{
      background-color:rgb(150, 96, 183) !important;
      color:white!important;
    }
                
    /*File Upload*/
    .dropzone .dz-default.dz-message {
      background-color: rgb(203, 179, 255) !important;
    }
                
    /*Comments*/
    .EnterCommentsWrapper, .commentsHistoryWrapper {
      background-color: rgb(203, 179, 255) !important;
    }
                
    /*Comments Button*/
    .EnterCommentsWrapper .pseudoBtnCommentSubmit, .EnterCommentsWrapper .pseudoBtnShowHistory {
      background-color: rgb(150, 96, 183) !important;
    }
                
    /*People Picker Button*/
    .PeoplePicker {
      background-color: rgb(203, 179, 255) !important;
    }

    Create Style Sheet CSS Code
  6. Click Finish

    The Shared Form CSS screen shows.


    Shared Form CSS

Step 2: Add Custom CSS to an eForm

Add the CSS file to the Employee Exit Checklist Request form.

  1. On the Shared Form CSS screen, select Human Resources Form Style.

    Shared Form CSS screen
  2. Click OK.

    The Employee Exit Checklist Request form shows your custom CSS format.


    Employee Checklist Form

Step 3: (Optional) Use the Shared CSS in a Different eForm

Add a shared CSS file to a different eForms in Employee Exit Checklist app.

Good to Know

  • This example step shows how to add a shared CSS file to Employee Checklist - Admin Action form. You can use a similar procedure for other forms in the Employee Exit Checklist app.
  • This procedure is required only if you want to use the custom CSS in more than one eForm.

How to Start

  1. On the Application Explorer screen, on the My Applications pane, click Employee Exit Checklist > Processes > Employee Exit Checklist > Forms > Task Forms > select the form you want to change.

    Employee Checklist Admin Action

Procedure

  1. On the eForm Builder screen, click CSS CSS icon > Shared CSS Shared CSS icon.

    Admin Action screen
  2. On the Shared Form CSS screen, select Human Resources Form Style.

    Shared Form CSS screen
  3. Click OK.

    The Employee Checklist - Admin Action form shows the custom CSS format.


    Formatted Admin Action screen

How to Get the App

This example is based on the Employee Exit Checklist app from the AgilePoint NX App Store. Use this procedure to get the app.

Prerequisites

Good to Know

  • This procedure is optional. It is provided so you can test the example with an out-of-the-box app.
  • This is part of the Background and Setup procedures, but many users preferred this step to appear after the example, not before it.

Procedure

  1. Click App Store App Store icon.

    App Store
  2. In the CATEGORY section, click All.

    App Store Home screen
  3. Click the Employee Exit Checklist app.

    App Store Employee Exit Checklist
  4. On the Employee Exit Checklist screen, click Add.

    Add Employee Exit Checklist App
  5. On the Trust App screen, click Trust it.
  6. Click Return to site.
  7. Publish the Employee Exit Checklist app.

    For more information, refer to Publish a process-based application.

How to Get the CSS Class Names for an eForm

This examples shows how to get the CSS class names from the eForm.

Good to Know

  • AgilePoint does not provide documentation for the CSS style names in eForms, custom pages in Page Builder, or other customizable web elements. You must get the CSS style names from the forms or pages at runtime or through a runtime preview.
  • This example uses the Google Chrome web browser. The procedures are different for different web browsers.
  • This example shows how to get the CSS class name for one form control in the Employee Checklist form. Use a similar procedure to get the CSS class names for other elements in an eForm.

How to Start

  1. Click Build Apps Build Apps icon.

    Build Apps icon
  2. On the Application Explorer screen, on the My Application pane, click Employee Exit Checklist > Processes > Employee Exit Checklist > Forms > Task Forms > Employee Checklist.

    Employee Exit Checklist

Procedure

  1. On the eForm Builder screen, click Perspective View Perspective View icon > PC Browser PC Browser icon.

    Employee Checklist Form
  2. In the runtime view of the eForm that opens in a new tab in your web browser, right-click the runtime view of the form, and click Inspect.

    Employee Checklist Form Runtime
  3. On the source code pane in Google Chrome, select the pointer.

    Source Code
  4. Place the pointer over the form control.

    The CSS class name for the specified element is highlighted on the source code.


    Highlighted Source Code