Versions Compared

Version Old Version 16 New Version 17
Changes made by

Ravikumar Babu CTOO (Unlicensed)

Ravikumar Babu CTOO (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Expand
titleHow to insert icons for form item labels?

You can insert icons for form item labels through CSS. Let's consider a form shown in the following screen shot taken from the sample application, ModelHouse.

Assume that the ModelHouse application is using the Market theme and the corresponding CSS file is: D:\Canvas\apache-tomcat-7.0.67\webapps\ctmodelhouse\css\style\market\jqtbs\market-jqtbs-ltr.css.

To insert icons for the form item labels, perform the following:

  1. Open the market-jqtbs-ltr.css file and add the following code in it.

    Code Block
    languagecss
    [data-item-id="FORM_CREDITCARD"] .CITY-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f1ad';
}

[data-item-id="FORM_CREDITCARD"] .DOB-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f073';
}

[data-item-id="FORM_CREDITCARD"] .INCOME-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f0b1';
}

[data-item-id="FORM_CREDITCARD"] .EMAIL-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f1fa';
}

[data-item-id="FORM_CREDITCARD"] .MOBILE-bs label.ct-form__label:before
{
    font-family: fontAwesome;
    content: '\f1ac';
}

/* Here, FORM_CREDITCARD is the form ID. 
*  CITY, DOB, INCOME, EMAIL, and MOBILE are the respective form item IDs. 
*/


  2. Save the changes to market-jqtbs-ltr.css file.
  3. Refresh the browser and verify that the icons are appearing on the left side of the form item labels as shown in the following screenshot:


Expand
titleHow to insert a form in another form using Form Designer?

To insert a form in another form, perform the following steps:

  1. In Canvas Studio, click Create > Form. The Form Designer displays.
  2. In the left pane of Form Designer, click Containers & More.
  3. In Component category, click Form.
  4. From the list of existing forms, select a form and click Save. Selected form will be inserted in the form design area.


Expand
titleHow to insert a grid in a form using Form Designer?

To insert a grid in a form, perform the following steps:

  1. In Canvas Studio, click Create > Form. The Form Designer displays.
  2. In the left pane of Form Designer, click Containers & More.
  3. In Component category, click Widget.
  4. From the list of existing widgets, select a widget and click Save. Selected widget will be inserted in the form design area.