(Example) Use Custom CSS in a Form Control

This example shows how to create and use a custom CSS class that changes the look and feel of a form control applied at the control level.

Background and Setup

Other Examples

Prerequisites

Good to Know

  • This example shows how to create and use a custom CSS class that changes the look and feel for the main heading in an eForm in the Customer Request app.
  • This example shows how to apply custom CSS at the form control level.

    To apply custom CSS at the form level, refer to (Example) Use Custom CSS in an eForm.

  • If you create a new version of an application, and change shared JavaScript or CSS at the application level, when you publish the new version, the changed shared JavaScript or CSS files apply to all versions of the application, including all previously published versions, and all application instances.

    This rule does not apply to custom JavaScripts and CSS created in an eForm. If you want to use different versions of JavaScript or CSS for different versions of an application, you can specify the scripts in your eForms, instead of specifying them at the application level.

  • This is a simple example. It is not intended as a real-world use case.

Result

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

Customer Request Preview
When you complete this example procedure, the finished eForm looks like this:

Customer Request Final

Step 1: Create a CSS File

Create a CSS file in eForm Builder.

How to Start

  1. Click App Builder.

    Build Apps screen
  2. On the App Explorer screen, on the My App pane, click Customer Request App > App Model & Resources > Forms > New Form > New Customer Request.

    Click Customer Request Form

Procedure

  1. On the New Customer Request form, click CSS > Shared CSS.

    Click Shared CSS
  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 Main Heading for Customer Facing Forms.

    Enter Title Bar for Customer Facing Form
  4. Click Next.
  5. On the CSS content body, add this CSS snippet.
    /*Heading*/
    .applyFieldCSS-Heading-Style {
      font-family: "Times New Roman", Times, serif;
      font-size:24px;
      text-align: center;
      color: rgb(255, 255, 255);
    }
                
    .applyContainerCSS-Heading-Style {
      background:rgb(102, 0, 255) ;
      border: 2px solid rgb(230, 234, 225);
      border-radius: 91px 1px 93px 1px;
      padding: 10px 10px;  
    }

    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 New Customer Request form.

  1. On the Shared Form CSS screen, select Main Heading for Customer Facing Forms.

    Shared Form CSS screen
  2. Click OK.

Step 3: Use the Custom CSS Class in a Form Control

Add a custom CSS class to a form control in the New Customer Request form.

Procedure

  1. On the New Customer Request form, put your cursor over the Customer Request Form field, and the form control toolbar shows.

    The Customer Request Form field is a Raw HTML form control.


    Toolbar Shows
  2. Click Edit Properties Edit Properties icon.

    Edit Raw HTML form control
  3. On the Field Setting - Raw HTML screen, click the Appearance tab.

    Click Appearance Tab
  4. On the Appearance tab, in the Field CSS Class field, select applyFieldCSS-Heading-Style.

    Select Field CSS Class
  5. In the Container CSS Class field, select applyContainerCSS-Heading-Style .

    Select Container CSS Class
  6. To save the changes, click Close Screen Close Screen icon.

    The New Customer Request form shows the custom CSS class format.


    Formatted screen

How to Get the App

This example is based on the Customer Request 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 PRODUCT section, click Form Based App.

    AgilePoint NX Home Page Screen
  3. Click the Customer Request app.

    Customer Request App
  4. On the Customer Request screen, click Add.

    Customer Request Screen
  5. On the Trust App screen, click Trust it.
  6. Click Return to site.