App Development

This would be dependent on the nature of functionality that you are putting together. For configuring Apps for Inquiry and Data Visibility close to zero coding knowledge is needed. If you are looking to increase user interaction on the App (like listening to user clicks or taps and handling those), then you would need basic JavaScript knowledge. Canvas comes with an associated Message Hub that provides protocol adapters and message conversion options to handle easy consumption external interfaces. In cases where there is a need for custom logic for data fetch or massaging, related coding knowledge to execute the logic in Java is necessary. For working with transaction forms, additionally would include ability to configure validation rules (XML), database logic (SQL).

Yes. This is supported. It is possible to have your existing application as a parent and embed “Apps” configured using Canvas Technology into it. If the intent is to have the application created using Canvas Technology as the main application, Canvas provides multiple options for integrating the existing application into the overall scheme of things.

Yes. This is possible. Canvas provides the ability to configure data capture forms using wide variety of controls as well as ability to create forms out of other pre-created forms (like assembling content). Canvas also provides standard life cycle events within the form to allow for good responsive customer experience while interacting with the form.

Yes. Canvas follows the Configure Once Run Anywhere principle. As part of the configuration, it supports the ability to target functionality to devices.

Canvas Technology provides the ability for your application designer to choose between Response or Adaptive design. It does not mandate or enforce only a single UI design approach.

Yes. Canvas provides the ability to package the configured application as an App that can be 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.

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

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

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.

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.

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:

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

   .CT_CARD_SUMMARY_WGT .table-wrapper-container 
   {
   	overflow-x: scroll;
   }
   
   /* where CT_CARD_SUMMARY_WGT is the widget ID. */

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

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.

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:

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

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

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

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.

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:

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

   .CT_ACC_SUMMARY_WGT table tr th:first-child .ct-row-expand
   {
       display: none;
   }
   
   /* where CT_ACC_SUMMARY_WGT is the widget ID. */

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

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.

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:

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

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

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

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.

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:

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

   [class*=wizard-view-] .PAYEE_FORM_tabItem span.ct-tab__txtspan 
   {
       display: none;
   }
   
   /* where PAYEE_FORM is the "Add Payee" form ID. */

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

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.

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:

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

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

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

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.
   
   

   [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:

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.

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.