Configure the Set the Form's Properties Action

This how-to illustrates using the Set the Form's properties rule action. You can use the Set the Form's properties action when you want to change form properties at runtime. For example, you may want to set a form's background color and title based on a particular condition or the state of the form.

Example: In the image below, you see two runtime versions of the same form. The form has two states; each state has the Set the Form's properties action added to the form initializing rule. The action sets the form's title and background color at runtime, based on the current state: blue for the Approval Task state and green for the Processing Task state.
Set the Forms Properties at Runtime

You can find the Set the Form's properties action in the Form Interaction group.
Set the Form's properties

Rule Breakdown

In this example, you add the Set the Form's properties action to the form initializing rule. You set following properties: Title, Padding, and [Form] Background Color. You run the form to view the impact of the rule action at runtime.
Set View Properties

This how-to uses a basic form (called Contact Form) with two views. You can use any form to work through the steps, as long as it contains at least one view. In the steps, you work with the (Base State). However, you can apply the Set the Form's properties action to any state rules.
Form

Follow the steps below to configure the Set the Form's properties action on the form initializing rule.

  1. Open your form and navigate to the Rules screen.
    Rules Screen
  2. Edit the When the Form is Initializing rule for the (Base State). (If you created a new form and don't see the (Base State), it is OK to continue with the form initializing rule found in the rule pane.)
    Edit Form Initializing Rule

    3. In the rule definition pane on the right side of the screen, you see two actions that initialize, or load, two views on the form. As you add views to a form, K2 adds the initialize actions for you. You add the Set the Form's properties action below the existing actions.
    View Initializing Actions

  3. With the Actions tab active, click Set the Form's properties (found under the Form Interaction heading) to add it to the rule definition pane. Click (configure).
    First Set View Properties Action

    4. Next, you configure the properties you want to set.

    There are two sections to the Set the Form's Properties configuration screen: Mapping Destinations and Context Browser. In the Mapping Destinations section, you can set various properties such as the form's title, visibility, background color, and form dimensions. See the table below the image for an explanation of each setting. The Context Browser contains references, variables, functions, and SmartObject properties. At runtime, K2 replaces Context Browser values with live data. In this way, you can personalize your content. To use Context Browser values, drag the item into the appropriate mapping destination text box.
    Set Properties Screen

    PropertySettingsNotes
    Detail
    NameTextThis is the file name of the view. You cannot set this property at runtime.
    TitleTextCheck this box to activate the property. Use this setting to generate a Title for the form. The title appears on the browser tab when the form opens. You can manually enter a title or use a value from the Context Browser.
    Display
    VisibleYes/NoCheck this box to activate the property. Select No to hide the form on a web page. Click Yes to show the form. By default, forms appear when opened.
    ThemeDrop-Down ListThe theme dictates the form's style and format. You cannot set this property at runtime.
    Page
    Background ColorTextThis property sets the web page background color. Use one of the following formats:
    • Hex (#000000)
    • RGB (rgb(0,0,0)
    • HTML Color Names: Black, Red, Khaki, etc.
    Background ImageTextThis property adds a background image. You cannot set this property at runtime.
    Form
    PaddingTextThis property increases or decreases spacing around controls within the form. For example, the space between a view and the form's edge. Enter whole numbers only.
    MarginTextThis property increases or decreases spacing around the form within the browser window. Enter whole numbers only.
    Background ColorTextThis property sets the form's background color. Use one of the following formats:
    • Hex (#000000)
    • RGB (rgb(0,0,0)
    • HTML Color Names: Black, Red, Khaki, etc.
    Layout
    WidthTextThis property sets the form's width. Enter whole numbers only.
    Min. Form WidthTextThis property sets a minimum width for the form. Enter whole numbers only.
    Max. Form WidthTextThis property sets a maximum width for the form. Enter whole numbers only.
    Behavior
    EnabledYes/NoCheck this box to activate the property. This property allows or disallows interaction with the form. Select No to disable the form at runtime. Select Yes to enable the form at runtime. When you disable a form, you cannot interact with it, for example, tabbing through controls.
    Read-OnlyYes/NoCheck this box to activate the property. Select Yes to render the form as read-only. While you cannot change control values, you can interact with the form, for example, tabbing through controls.
    Advanced
    Advanced properties cannot be set at runtime. Set advanced properties at design time.
    Set the Form's Properties Screen

  4. Check the Title option. For the value, enter Test Form.
    Set Form Title
  5. Check the Padding option. For the value, enter 35.
    Set Padding Value
  6. Check the Background Color (Form) option. For the value, enter #E4EFFA (light blue). Click OK to save the property settings. Click OK to save the rule. Click Finish to save and exit the form.
    Set Form Background Color
  7. To test the rule action, open the form using the Runtime URL found in the central pane. You should see custom settings for the title in the browser tab, the form padding, and the form's background color.
    Properties Changed at Runtime