Versions Compared

Version Old Version 25 New Version 26
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
titleUnable to deploy application due to SASS compilation failure

Canvas Technology platform supports SASS from 19.1 version. While SASS compiles successfully on Windows servers, in some non-Windows systems (e.g. HP Unix or iOS) SASS compilation fails during deploying the application. In these cases, you must copy the CSS files from the correctly deployed development or testing environment (Windows) and store those in the failed environment (non-Windows). You must then remove the SASS references in the CSSConfig.xml file and use plain CSS instead to successfully deploy the application on non-Windows environments.

Perform the following steps:

  1. Copy the CSS files from the correctly deployed Windows environment.
  2. Store the CSS files to the specific location on the non-Windows environment.

  3. Replace the SASS file name to CSS in the CSSConfig.xml of CTRIAFramework in the application WAR.

    Info

    For example, in Tomcat server, the CSSConfig.xml is located in the following location:

    • ..\apache-tomcat-7.0.67\webapps\ctmodelhouse\CTRIAFramework\UIArena\theme\system\cssconfig.xml (here, ctmodelhouse is the application)


    Code Block
    languagexml
    <?xml version="1.0" encoding="UTF-8"?>
<themeConfig>
	<!-- * * Copyright 2014. Intellect Design Arena Limited. All rights reserved. * -->
	<theme id="structure" name="Structure Theme" folderRef="">
		<framework name="jqtbs" folderRef="/CTRIAFramework/UIArena/theme/system/jqtbs/structure/">
			<direction mode="ltr" folderRef="/CTRIAFramework/UIArena/theme/system/jqtbs/structure/" minifiedPattern="">
				<css name="structure-jqtbs.css" /> -- rename all .scss files to .css
			</direction>
		</framework>
	</theme>
</themeConfig>


  4. If suppose any custom themes were created using the Theme Designer in Canvas Studio, remove its entry from the THEME_MASTER table. Then, copy the custom theme's CSS files from the correctly deployed Windows environment and store in the non-Windows environment. Then specify the path to the custom theme's CSS file in the application's CSSConfig.xml in the application WAR.

    Info

    For example, in Tomcat server, the application's CSSConfig.xml is located in the following location:

    • ..\apache-tomcat-7.0.67\webapps\ctmodelhouse\css\style\cssconfig.xml (here, ctmodelhouse is the application)


    Code Block
    languagexml
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<themeConfig>
	<theme id="CustomRed" name="Custom Red Theme" folderRef=""> -- ID and name of the custom theme
		<framework name="jqtbs" folderRef="/CTRIAFramework/UIArena/theme/system/jqtbs/structure/">
			<direction mode="ltr" folderRef="/CTRIAFramework/UIArena/theme/system/jqtbs/structure/" minifiedPattern="">
				<css name="custom-red-jqtbs.css" /> -- CSS file of custom theme
			</direction>
			<direction mode="rtl" folderRef="/CTRIAFramework/UIArena/theme/system/jqtbs/structure/" minifiedPattern="">
				<css name="custom-red-jqtbs.css" /> -- CSS file of custom theme
				<css name="custom-red-jqtbs-rtl.css" /> -- CSS file of custom theme
			</direction>
		</frame
</themeConfig>


Forms

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.

...