Page Comparison

...

Expand

title	For any changes done through Canvas, would it require to keep repackaging the application for changes to be reflected in the App distributed through Apple Store or Google Playstore?

For most of the scenarios, the answer is No. It is not required to redistribute the App. Canvas uses a unique modeling concept that allows for the UI configuration information to be updated seamlessly into the App without having the need to repackage the App. Having said that, there are few situations like changes to skins, images, logic written through Canvas extensions that would require a repackage.

Encryption

You can explicitly enable horizontal scroll bar for a widget through CSS. Let's consider a grid widget shown in the following screen shot taken from the sample application, ModelHouse.

Image Removed

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 enable horizontal scroll bar for the grid widget, perform the following:

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

Expand

title	How to enable horizontal scroll bar for a widget?

Code Block

language	css

.CT_CARD_SUMMARY_WGT .table-wrapper-container 
{
	overflow-x: scroll;
}

/* where CT_CARD_SUMMARY_WGT is the widget ID. */

Save the changes to market-jqtbs-ltr.css file.

Refresh the browser and verify if the horizontal scroll bar appears on the widget as shown in the following screenshot:

Image Removed Expand

title	How to hide the column headers and filter bar of a grid widget?

You can hide the column headers of a grid widget through CSS. Let's consider a grid widget shown in the following screen shot taken from the sample application, ModelHouse.

Image Removed

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 hide the column headers and the filter bar of a grid widget, perform the following:

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

Code Block

language	css

/* The following CSS code snippet is for hiding the column headers of a grid. */
.CT_CARD_SUMMARY_WGT .table-wrapper-container thead
{
	display: none;
}


/* The following CSS code snippet is for hiding the filter bar of a grid. */
.CT_CARD_SUMMARY_WGT .ct-padding-filter-container
{
	display: none;
}

/* Here, CT_CARD_SUMMARY_WGT is the widget ID. */

Save the changes to market-jqtbs-ltr.css file.

Refresh the browser and verify if the column headers and filter bar of the widget are hidden as shown in the following screenshot:

Image Removed Expand

title	How to hide a specific column header in a grid, such as plus icon column header in Grouped Grid?

You can hide a specific column header in a grid, such as plus icon header column in Grouped Grid through CSS. Let's consider a grid widget shown in the following screen shot taken from the sample application, ModelHouse.

Image Removed

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 hide hide a specific column header in a grid, perform the following:

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

Code Block

language	css

.CT_ACC_SUMMARY_WGT table tr th:first-child .ct-row-expand
{
    display: none;
}

/* where CT_ACC_SUMMARY_WGT is the widget ID. */

Save the changes to market-jqtbs-ltr.css file.

Refresh the browser and verify if the specific column header (plus icon in this example) is hidden as shown in the following screenshot.

Image Removed

Expand

title	How to hide the forms title in a form wizard?

You can hide the forms title in form wizard through CSS. Let's consider a form wizard shown in the following screen shot taken from the sample application, ModelHouse.

Image Removed

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 hide the forms title in a form wizard, perform the following:

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

Code Block

language	css

[data-item-id="FORM_TRANSFER"] [data-wizard-id="progress-steps-FORM_TRANSFER"] span.ct-tab__txtspan
{
    display: none;
}

/* where FORM_TRANSFER is the form wizard ID. */

Save the changes to market-jqtbs-ltr.css file.

Refresh the browser and verify if the forms title are hidden as shown in the following screenshot:

Image Removed

Expand

title	How to hide a specific form's title in a form wizard?

You can hide a specific form's title in a form wizard through CSS. Let's consider a form wizard shown in the following screen shot taken from the sample application, ModelHouse.

Image Removed

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. Consider that in the form wizard shown in the screen shot you want to hide the "Add Payee" title alone.

To hide a specific form's title in a form wizard, perform the following:

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

Code Block

language	css

[class*=wizard-view-] .PAYEE_FORM_tabItem span.ct-tab__txtspan 
{
    display: none;
}

/* where PAYEE_FORM is the "Add Payee" form ID. */

Save the changes to market-jqtbs-ltr.css file.

Refresh the browser and verify if the specific form's title ('Add Payee' in this example) is hidden as shown in the following screenshot:

Image Removed

Expand

title	How to adjust the width of the tab panels in a form wizard?

You can adjust the width of the tab panels in a form wizard through CSS. Let's consider a form wizard shown in the following screen shot taken from the sample application, ModelHouse.

Image Removed

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 adjust the width of the tab panels in a form wizard, perform the following:

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

Code Block

language	css

[data-item-id="FORM_TRANSFER"] [class*=wizard-view-]{
    display: inherit;
}
[data-item-id="FORM_TRANSFER"] [class*=wizard-view-].nav-tabs li {

    width: 250px;
}

/* where, FORM_TRANSFER is the form wizard ID. */

Save the changes to market-jqtbs-ltr.css file.

Refresh the browser and verify if the tab panels' width are adjusted as shown in the following screenshot:

Image Removed

Expand

title	How 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.

Image Removed

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:

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

Code Block

language	css

[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. 
*/

Save the changes to market-jqtbs-ltr.css file.

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:

Image Removed

Expand

title	Unable 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:

Copy the CSS files from the correctly deployed Windows environment.

Store the CSS files to the specific location on the non-Windows environment.

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

language	xml

title	How to enable encryption of business data, request and response between client and server in the application built using Canvas?

You can enable encryption for the application built using Canvas by setting the 'ENCRYPT_SERVER_CALLS' property to 'Y' in the 'systempreferences.properties' file.

Note
When you enable encryption, Canvas will encrypt all requests coming to your application including log out.

A sample 'systempreferences.properties' file is available in CTModelHouseResource.jar in the Model House application that comes as part of the Canvas platform package.

Image Removed

Note that you must stop and start your application server to enable this feature. After the application server is restarted, access the widgets in the application and check the Network tab in the browser console to verify the encryption.

Image Removed

CSS

Getting error when setting up the application in a new environment

Check for the following pattern in the error logs:

Code Block

linenumbers	true

[server.startup : 0][][][][c.i.c.a.s.AlertsSchedulerFactory][ERROR]
				 {[CTALT01097]:Exception occurred while starting a scheduler and the exception is {} }
org.quartz.SchedulerConfigException: Failure occured during job recovery.
	at org.quartz.impl.jdbcjobstore.JobStoreSupport.schedulerStarted(JobStoreSupport.java:663)

Solution: Check if any of the configuration in canvas-default-alertschdlrquartz.properties file is updated by comparing with the values in the original file in the CT platform release. If the value of the key org.quartz.jobStore.dataSource is changed, ensure that there is a datasource in that name.

Expand

title	CT Server error occurs in logs

Check for the following pattern in the error logs:

Code Block

linenumbers	true

[com.intellectdesign.canvas.cache.handler.LocalCacheHandlerProxy][ERROR] {[CTCAC00033]:Could not load 'com.intellectdesign.canvas.cache.entitlement.EntitlementCacheBuilder'.

Solution: Include the CTReadyApps.jar from the CT release to the application's dependencies folder.

Expand

title	Application shows blank page after log-in

Check the following:

Any errors in the browser console.
Any network call failing
Check if users' entitlements have changed
Any errors in the CT server logs. If so, share it to CT Support team via Jira.

Expand

title	Getting system error message in application.

Scenario: The error message, “We were not able to complete your request due to a system error. As a result, no action is taken. Please contact Customer Support for further assistance. Reference id : be2fa6ca-c84f-4a8d-b7a7-1462cd0f2267” is displayed in a pop up when performing an action in the end application.

Solution:

Check the network tab of the browser console to verify the parameters passed for the request. Copy the reference number from the pop up and search for it in all the “.log” files within the work folder path to find the reason for the server side exception.

Expand

title	How to add new language in the end application?

Refer Adding a New Language in your Application - from Canvas 18.1 onwards.

Expand

title	How to add a custom load mask in the application?

Refer Enabling Custom Load Mask.

Data Rendering or Data Submission

Expand

title	Grid widget has date column configured in Studio, but it is not rendering in end application

Check for the following error pattern in the log file:

Code Block

linenumbers	true

[com.intellectdesign.canvas.data.conversion.util.JSONToHashMapConverter][ERROR]
			 {[CTBAS00014]:The String is either not in proper date format or is not a date: Format: dd/mm/yyyy , Value:  31-12-2030

Solution: If such date format mismatch occurs, then change the value of the date field to the user-preferred format.

Expand

title	Data submit to database via Request Modeler flow is failing

Check for the following error pattern in the log file:

Code Block

linenumbers	true

{[CTAUD00155]:AuditHandlerInstruction.logException() - Encountered exception.
				 Exception message : An SQLException occurred while executing the insert operation.

Solution: Request Modeler assigns a random and unique reference number for each request, which needs to be stored in the REFERENCE column in OD_AUDIT table in CT schema. Check in your code if the request data is modified to make the value of REFERENCE_NO column to null. If so, modify the code to make it not null because Request Modeler needs the reference number for internal processing. If you need to use or process a reference for functional logic, use a different column/variable to capture it.

Expand

title	Data fetch from DB table throws error

Scenarios:

Data fetch from DB table throws error in logs
Upgrading to latest CT binaries throws error in logs

For above scenarios, check for the following pattern in the error logs:

Code Block

linenumbers	true

Cause: java.sql.SQLSyntaxErrorException
Cause: java.sql.SQLSyntaxErrorException: ORA-00942: table or view does not exist
Cause: java.sql.SQLSyntaxErrorException: Unknown column
Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax;
Cause: java.sql.SQLSyntaxErrorException: ORA-00904: "COLUMN_NAME": invalid identifier
java.sql.BatchUpdateException: ORA-00904: "COLUMN_NAME": invalid identifier

Solution: For any exception of the above pattern, check the ctdblogs to find the SQL ID of the query that is failing. If the query is related to functional database/schema, fix the query. If the query is within CT or includes a CT table, check if all the incremental scripts were applied properly. Even then if not resolved, inform the CT Platform support team.

Expand

title	Couldn't connect to functional DB

Check for the following pattern in the error logs:

Code Block

linenumbers	true

[com.intellectdesign.canvas.database.IBatisDatabaseAccess][ERROR]
			 {[CTDBL00088]:An SQLException occurred while executing the select operation}
java.sql.SQLException: The Network Adapter could not establish the connection

Solution: Check if the connectivity to the functional DB is working.

Expand

title	Couldn't save data on DB

Check for the following pattern in the error logs:

Code Block

linenumbers	true

[com.intellectdesign.canvas.database.IBatisDatabaseAccess][ERROR]
			 {[CTDBL00105]:An SQLException occurred while executing the Batch Insert operation}

Solution: For any exception of the above pattern, check the ctdblogs to find the SQL ID of the batch insert query that is failing.

Expand

title	Couldn't save data on DB

Check for the following pattern in the error logs:

Code Block

linenumbers	true

[c.i.c.d.TransactionManager][ERROR]
			 {[CTDBL00003]:Caught exception in getTransaction(USER_TXN_NAME)}

Solution: Check if the JNDI is configured as a datasource in the server.

Expand

title	Request Modeler save is not working

Check for the following pattern in the error logs:

Code Block

linenumbers	true

Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Data too long for column 'BUSINESS_KEY' at row 1

Solution: Check the data passed through the request modeler. It is advised to configure a unique key as the BUSINESS_KEY while creating the request modeler in Studio. The value passed must not be more than 256 characters.

Expand

title	How to display currency symbol for amount fields?

Refer Amount page for more information.

Expand

title	Couldn't get data from DB for an app

Check for the following pattern in the error logs:

Code Block

linenumbers	true

[com.intellectdesign.canvas.viewdefinition.SimpleViewDefinitionInstruction][ERROR]
				 {[CTVDF00386]:Database Exception occurred in fetchData() while retrieving the View data for the view id : SOME_VIEW_ID}

Solution:

Check the app's datasource and the its response.
At the end of the stack trace, check the root cause mentioned in the "Caused by:" section.

Expand

title	Couldn't get data from Web Service for an app

Check for the following pattern in the error logs:

Code Block

linenumbers	true

[com.intellectdesign.canvas.connectors.camel.DefaultRoute][ERROR]
			 {[CTVDF00933]:Caught Exception while making a web service call {}}

Solution: Check the stack trace to find the details of the web service that did not return the success response.

Expand

title	Does CT Platform support data persistancy across pages or forms in wizard?

Scenario: Data persistence is sometimes required at every page while moving to next page as end-users of the application can quit the application at any stage and come back to resume the work.

Solution: CT Platform does not maintain the state of each form or page. Implementation team must write code to handle persist data across pages or forms for the required functional behaviour in the application.

Expand

title	How to create a custom publisher for Request Modeler?

Refer Custom Publisher.

Expand

title	How to update functional data saved through Request Modeler instead of inserting new or deleting data?

Refer Additional Ready-made Activities supported by Request Modeler.

Encryption

Expand

title	How to enable encryption of business data, request and response between client and server in the application built using Canvas?

You can enable encryption for the application built using Canvas by setting the 'ENCRYPT_SERVER_CALLS' property to 'Y' in the 'systempreferences.properties' file.

Note
When you enable encryption, Canvas will encrypt all requests coming to your application including log out.

A sample 'systempreferences.properties' file is available in CTModelHouseResource.jar in the Model House application that comes as part of the Canvas platform package.

Image Added

Note that you must stop and start your application server to enable this feature. After the application server is restarted, access the widgets in the application and check the Network tab in the browser console to verify the encryption.

Image Added

Expand

title	Encryption is enabled, but not working

Check for following error pattern in the log file:

Code Block

linenumbers	true

[c.i.c.s.e.EncryptionUtils][ERROR] {[CTCOM00155]:Error occured in the decrypt JWT method : {}}
com.intellectdesign.canvas.servercomm.encryption.DecryptionException: no_error_message
	at com.intellectdesign.canvas.servercomm.encryption.AESEngine.decrypt
Caused by: javax.crypto.IllegalBlockSizeException: last block incomplete in decryption
	at org.bouncycastle.jcajce.provider.symmetric.util.BaseBlockCipher.engineDoFinal(Unknown Source) 

[com.intellectdesign.canvas.servercomm.encryption.PublicKeyImpl][ERROR] 
		{[CTRND00412]:Exception occurred in the Encryption and decryption of Req/Res : {}}
javax.crypto.BadPaddingException: unknown block type

Solution:

If such error pattern occurs (line numbers 1, 2, 4, 7-9) in the logs, then check the following:

Java version must be higher than 1.8.251.
If the CT version is lower than 19.1.7.6_17307, then the bcprov-jdk16-1.46.jar file must be present.
If the CT version is above 19.1.7.6_17307, then the bcprov-ext-jdk15to18-169.jar must be present.
If the CT version is lower than 19.1.1.0, then the bcprov-ext-jdk15on-150.jar must be present.

CSS

Expand

title	How to enable horizontal scroll bar for a widget?

You can explicitly enable horizontal scroll bar for a widget through CSS. Let's consider a grid widget shown in the following screen shot taken from the sample application, ModelHouse.

Image Added

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 enable horizontal scroll bar for the grid widget, perform the following:

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

Code Block

language	css

.CT_CARD_SUMMARY_WGT .table-wrapper-container 
{
	overflow-x: scroll;
}

/* where CT_CARD_SUMMARY_WGT is the widget ID. */

Save the changes to market-jqtbs-ltr.css file.
Refresh the browser and verify if the horizontal scroll bar appears on the widget as shown in the following screenshot:

Image Added

Expand

title	How to hide the column headers and filter bar of a grid widget?

You can hide the column headers of a grid widget through CSS. Let's consider a grid widget shown in the following screen shot taken from the sample application, ModelHouse.

Image Added

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 hide the column headers and the filter bar of a grid widget, perform the following:

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

Code Block

language	css

/* The following CSS code snippet is for hiding the column headers of a grid. */
.CT_CARD_SUMMARY_WGT .table-wrapper-container thead
{
	display: none;
}


/* The following CSS code snippet is for hiding the filter bar of a grid. */
.CT_CARD_SUMMARY_WGT .ct-padding-filter-container
{
	display: none;
}

/* Here, CT_CARD_SUMMARY_WGT is the widget ID. */

Save the changes to market-jqtbs-ltr.css file.
Refresh the browser and verify if the column headers and filter bar of the widget are hidden as shown in the following screenshot:

Image Added

Expand

title	How to hide a specific column header in a grid, such as plus icon column header in Grouped Grid?

You can hide a specific column header in a grid, such as plus icon header column in Grouped Grid through CSS. Let's consider a grid widget shown in the following screen shot taken from the sample application, ModelHouse.

Image Added

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 hide hide a specific column header in a grid, perform the following:

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

Code Block

language	css

.CT_ACC_SUMMARY_WGT table tr th:first-child .ct-row-expand
{
    display: none;
}

/* where CT_ACC_SUMMARY_WGT is the widget ID. */

Save the changes to market-jqtbs-ltr.css file.
Refresh the browser and verify if the specific column header (plus icon in this example) is hidden as shown in the following screenshot.

Image Added

Expand

title	How to hide the forms title in a form wizard?

You can hide the forms title in form wizard through CSS. Let's consider a form wizard shown in the following screen shot taken from the sample application, ModelHouse.

Image Added

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 hide the forms title in a form wizard, perform the following:

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

Code Block

language	css

[data-item-id="FORM_TRANSFER"] [data-wizard-id="progress-steps-FORM_TRANSFER"] span.ct-tab__txtspan
{
    display: none;
}

/* where FORM_TRANSFER is the form wizard ID. */

Save the changes to market-jqtbs-ltr.css file.
Refresh the browser and verify if the forms title are hidden as shown in the following screenshot:

Image Added

Expand

title	How to hide a specific form's title in a form wizard?

You can hide a specific form's title in a form wizard through CSS. Let's consider a form wizard shown in the following screen shot taken from the sample application, ModelHouse.

Image Added

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. Consider that in the form wizard shown in the screen shot you want to hide the "Add Payee" title alone.

To hide a specific form's title in a form wizard, perform the following:

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

Code Block

language	css

[class*=wizard-view-] .PAYEE_FORM_tabItem span.ct-tab__txtspan 
{
    display: none;
}

/* where PAYEE_FORM is the "Add Payee" form ID. */

Save the changes to market-jqtbs-ltr.css file.
Refresh the browser and verify if the specific form's title ('Add Payee' in this example) is hidden as shown in the following screenshot:

Image Added

Expand

title	How to adjust the width of the tab panels in a form wizard?

You can adjust the width of the tab panels in a form wizard through CSS. Let's consider a form wizard shown in the following screen shot taken from the sample application, ModelHouse.

Image Added

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 adjust the width of the tab panels in a form wizard, perform the following:

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

Code Block

language	css

[data-item-id="FORM_TRANSFER"] [class*=wizard-view-]{
    display: inherit;
}
[data-item-id="FORM_TRANSFER"] [class*=wizard-view-].nav-tabs li {

    width: 250px;
}

/* where, FORM_TRANSFER is the form wizard ID. */

Save the changes to market-jqtbs-ltr.css file.
Refresh the browser and verify if the tab panels' width are adjusted as shown in the following screenshot:

Image Added

Expand

title	How 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.

Image Added

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:

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

Code Block

language	css

[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. 
*/

Save the changes to market-jqtbs-ltr.css file.
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:

Image Added

Expand

title	Unable 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:

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

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

language	xml

<?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>

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

language	xml

<?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 -->
				<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>

...

</direction> </frame </themeConfig>

Forms

Expand

title	How to insert a form in another form using Form Designer?

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

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

Expand

title	How to insert a grid in a form using Form Designer?

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

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

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

In Canvas Studio, click Create > Form. The Form Designer displays.

In the left pane of Form Designer, click Containers & More.

In Component category, click Widget.

From the list of existing widgets, select a widget and click Save. Selected widget will be inserted in the form design area

Expand

title	How to insert a form in another form using Form Designer?

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

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

Expand

title	How to insert a grid in a form using Form Designer?

change the placeholder for error message for each form field?

The mechanism to change the placeholder for displaying error messages for each form field is supported at the application-level, meaning the placeholder can be set for all form items globally across the whole application. By default, Canvas displays the error message for a form field on hovering over the error icon that is adjacent to the form item. However, you can change it to display the error message below the form items. For details of this mechanism, refer Displaying Error Messages below the Form Items.

Expand

title	On-demand loading of form listeners is at workspace-level, can it be done at form-loading level?

Yes. Define filesets in the ondemandjsfile.xml grouping the JS files needed. Use canvas.core.downloadManager object's requireScripts API to fetch this fileset before loading the form.

Expand

title	Sample code for form data submission to a web service.

Refer Posting Data using the POST Method.

Expand

title	How to change the placeholder for error message for each form field?

The mechanism to change the placeholder for displaying error messages for each form field is supported at the application-level, meaning the placeholder can be set for all form items globally across the whole application. By default, Canvas displays the error message for a form field on hovering over the error icon that is adjacent to the form item. However, you can change it to display the error message below the form items. For details of this mechanism, refer Displaying Error Messages below the Form Items.

Expand

title	On-demand loading of form listeners is at workspace-level, can it be done at form-loading level?

Yes. Define filesets in the ondemandjsfile.xml grouping the JS files needed. Use canvas.core.downloadManager object's requireScripts API to fetch this fileset before loading the form.

Refer Posting Data using the POST Method.

Expand

title	Sample code for form data submission to a web service.

map request model ID to an existing form designed in Studio?

Refer Configuring Request Modeler Actions for Self-Designed Forms.

Expand

title	How to configure event wiring for form items?

Refer Form Items Event Wiring.

Expand

title	What are the APIs available from CT Platform for forms and form items?

Refer Form and Form Item APIs.

Expand

title	How to use the performance timer?

Use the following syntax to use the performance timer:

Code Block

language	java
linenumbers	true

PerformanceTimer performanceTimer = new PerformanceTimer(); performanceTimer.startTimer("MyClassName.myMethodName");
// write your logic here 
performanceTimer.endTimer();

Database

Expand

title	How to get information from stored procedures or functions with parameters, such as log-in user ID, language, in datasource?

Data can be fetched using Instruction classes (Java class) in Canvas. Canvas uses iBatis library for database access. Callable statements can be used to access Stored Procedures and Functions to get the data.

Login ID, Language etc. will be passed as parameters by Canvas which can be used to filter data accordingly.

...

Expand

title	How to load CT framework's template files that have been modified using etag?

Whenever you modify any CTTPL files that comes with CT framework, it is necessary to ensure that the updated template (CTTPL) files are loaded correctly. To load the updated CT framework templates files using etag, add the following code snippet in the CT_Home.jsp page of Canvas Studio:

Note
The following code must be added to the Home page JSP of the application too if the application is not created using the Canvas platform's codegen.

<%@ page import = "

Code Block

language	xml

	xml

<%@ page
	import = "com.intellectdesign.canvas.login.sessions.SessionInfo,
	org.json.JSONArray,org.json.JSONObject,org.json.JSONException,
	com.intellectdesign.canvas.login.sessions.SessionInfoSessionManager,
	org.json.JSONArray,org.json.JSONObject,org.json.JSONException,
	com.intellectdesign.canvas.login.sessions.SessionManager,
	com.intellectdesign.canvas.deviceband.TargetedFramework,
	com.intellectdesign.canvas.downloadmanager.RuntimeChangeRegistry"
%>

com.intellectdesign.canvas.deviceband.TargetedFramework,
	com.intellectdesign.canvas.downloadmanager.RuntimeChangeRegistry"
%>

<div 
	data-item-id = "CHANGED_CTTPL" 
	style = "display:none">
	
	<%
		RuntimeChangeRegistry changedCttpFiles = RuntimeChangeRegistry.getInstance();
		out.print(changedCttpFiles.getCttplFilesChanged());
	%>
</div>
	
<!-- The following div tag code will be used to load the default CTTPL file -->
<div 
	data-item-id = "CHANGEDDEFAULT_CTTPL" 
	style = "display:none">
	
	<%
		RuntimeChangeRegistry changedCttpFiles = RuntimeChangeRegistry.getInstance();
		out.print(changedCttpFiles.getCttplFilesChanged());
	%>
</div>
	
<!-- The following div tag code will be used to load the default CTTPL file -->
<div 
	data-item-id = "DEFAULT_CTTPL" 
	style = "display:none">
	
	<%
		RuntimeChangeRegistry defaultCttpFile=RuntimeChangeRegistry.getInstance();

		if(defaultCttpFile.getDefaultCttplFileChanged() != null && !defaultCttpFile.getDefaultCttplFileChanged().isEmpty())
			out.print(defaultCttpFile.getDefaultCttplFileChanged().get(0));
		else
			out.print("");
	%>
</div>

...

Expand

title	How to enable column filtering and pagination on grids displaying web service data?

To enable columns sorting and filtering, and pagination on grid apps that display data from web services, it is necessary to enable the data cache option.

Let’s assume that the ACCOUNT DETAILS classic grid app (widget), with a web service data source is already created in Canvas Studio.

In App Designer, click the View Config tab and then proceed to select the Caching option.
Click the Enable Data Cache toggle and select the App Instance option in Caching Scope.

Image Removed
To apply data filters, click the Filter

Image Removedicon.

To configure the column properties of ACCOUNT_ID, click Configure.

In View Column Configuration, click the Sort & Filter option.

Image Removed
In Sort & Filter, configure the parameters, as shown in the following screen shot:

Image Removed
Proceed to save the app.
Let’s assume that the ACCOUNT DETAILS app is mapped to the ACCOUNT SUMMARY workspace. The data of the ACCOUNT DETAILS app, fetched from the web service is displayed in the functional application, Modelhouse:
Click the Filter

Image Removedicon on the right side of the app, select the Account_ID column and click Contains.

Image Removed
In the Account_ID contains search box, enter the appropriate value and press Enter.

Image Removed
The data matching the search criteria provided for ACCOUNT_ID column appear in the grid.

Image Removed

none">
	
	<%
		RuntimeChangeRegistry defaultCttpFile=RuntimeChangeRegistry.getInstance();

		if(defaultCttpFile.getDefaultCttplFileChanged() != null && !defaultCttpFile.getDefaultCttplFileChanged().isEmpty())
			out.print(defaultCttpFile.getDefaultCttplFileChanged().get(0));
		else
			out.print("");
	%>
</div>

Grids

Expand

title	How to enable column filtering and pagination on grids displaying web service data?

To enable columns sorting and filtering, and pagination on grid apps that display data from web services, it is necessary to enable the data cache option.

Let’s assume that the ACCOUNT DETAILS classic grid app (widget), with a web service data source is already created in Canvas Studio.

In App Designer, click the View Config tab and then proceed to select the Caching option.
1. Click the Enable Data Cache toggle and select the App Instance option in Caching Scope.
  
  Image Added
To apply data filters, click the FilterImage Addedicon.
1. To configure the column properties of ACCOUNT_ID, click Configure.
2. In View Column Configuration, click the Sort & Filter option.
  
  Image Added
In Sort & Filter, configure the parameters, as shown in the following screen shot:

Image Added
Proceed to save the app.
Let’s assume that the ACCOUNT DETAILS app is mapped to the ACCOUNT SUMMARY workspace. The data of the ACCOUNT DETAILS app, fetched from the web service is displayed in the functional application, Modelhouse:
Click the FilterImage Addedicon on the right side of the app, select the Account_ID column and click Contains.

Image Added
In the Account_ID contains search box, enter the appropriate value and press Enter.

Image Added
The data matching the search criteria provided for ACCOUNT_ID column appear in the grid.

Image Added

Expand

title	How to add new set of records for the Live Scroll Grid with Cache widgets?

To add new set of records for the Live Scroll Grid with Cache or Paging Grid widgets, perform the following steps:

Specify the env option in the appropriate listener file of the paging grid widget, as shown in the following code snippet:
Code Block
language js
ct.env.options.widget.enableLoadOnScroll=true;
While configuring the app (widget) in App Designer, select the Paging Grid view type.

The styles should be specified for the paging grid widget, as shown in the following code snippet:

Code Block

language	js

[data-widgetid="WGT_BENE"] tbody
	  {
	    display:block;
	    overflow: auto;
	    height:120px;  // Sample Height 
	    width:auto;
	  }
[data-widgetid="WGT_BENE"] thead tr
	  {
	    display:block;
	    width:auto;
	  } 
[data-widgetid="WGT_BENE"] th,td 
      {
	    width:180px;  // Sample Width
	  }

In the aforementioned code snippet, the Widget ID is WGT_BENE.

Cookies

Expand

title	Why do the Hybrid Mobile Apps don't send the cookies to the server?

By default, in the HTTP response header, the SameSite attribute in the Set-Cookie header element prevents the cookies from being sent to the server in the hybrid mobile apps. For instanceexample, if the SameSite attribute has been specified as "SameSite=Strict", ensure that you nullify the SameSite attribute with "None", for instance, "SameSite=None", thereby removing the SameSite attribute from the Set-Cookie header element in the HTTP response.

Note
The Hybrid Mobile Apps get loaded as ad hoc units in the WebView instances and therefore it is essential that the SameSite attribute should be removed or nullified in the Set-Cookie header element in the HTTP response.

...

Version	Old Version 31	New Version Current
Changes made by	Lakshminarayanan1 S CTOO (Unlicensed)	Ravikumar Babu CTOO (Unlicensed)
Saved on	Dec 28, 2020	Oct 19, 2022

Page Comparison

Versions Compared

Key

Encryption

CSS

Data Rendering or Data Submission

Encryption

CSS

Forms

Database

Cookies