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.

Check for the following pattern in the error logs:

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

Check for the following pattern in the error logs:

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

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.

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.

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

Refer Enabling Custom Load Mask.

Check for the following error pattern in the log file:

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

Check for the following error pattern in the log file:

{[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.

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:

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.

Check for the following pattern in the error logs:

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

Check for the following pattern in the error logs:

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

Check for the following pattern in the error logs:

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

Check for the following pattern in the error logs:

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.

Refer Amount page for more information.

Check for the following pattern in the error logs:

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

Check for the following pattern in the error logs:

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

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.

Refer Custom Publisher.

Refer Additional Ready-made Activities supported by Request Modeler.

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.

Check for following error pattern in the log file:

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

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

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:

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.

   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)

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

   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)

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

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.

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.

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.

Refer Configuring Request Modeler Actions for Self-Designed Forms.

Refer Form Items Event Wiring.

Refer Form and Form Item APIs.

Use the following syntax to use the performance timer:

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

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.

Database details are fetched by Canvas as JNDI lookups (preferred approach). Alternatively, the connection details can be stored in the DB and datasources can be created to point to these connections to fetch data.

Yes. Canvas can fetch data from multiple databases (either as JNDI lookup or via Connection Details configured).

Data connection strings are stored on the server in the case of JNDI. The JNDI names are referred in a property file as part of the application WAR file. Alternative approach stores the database details in the Canvas framework's database instance.

The authentication token provided by the SSO's authentication provider has to be stored in a Canvas' custom object called SessionInfo, which will be stored in the session object. This will be passed by Canvas to the application code for all requests coming in which can be used by application to do re-authentication/re-authorization as appropriate. This re-authentication is typically done in a SessionFilter, which is attached to all requests.

Canvas supports multiple criteria values that can be defined at Product-SubProduct-Function level. Each grid column can specify one criteria to be respected.

Yes. Chart allows customizations via a configuration (using properties that are exposed by Fusion Charts).

No. End users are not allowed to change the column titles. However, they can change the filters applied by default and can save those as custom views which will be applicable to those users.

When a user is logging in, Canvas creates a custom SessionInfo object, loads it with user details, and stores it in session. When the session times out or when the user logs out, session is invalidated and the SessionInfo is cleared. This is orchestrated by a class called SessionManager. Application must call SessionManager's validate session. Each request will be validated for a valid session using SessionFilter.

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:

<%@ page
	import = "com.intellectdesign.canvas.login.sessions.SessionInfo,
	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"
%>

<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 = "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>

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.

1. 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.  
      
      
      
      
2. To apply data filters, click the Filtericon. 
   
   1. To configure the column properties of ACCOUNT_ID, click Configure.
   2. In View Column Configuration, click the Sort & Filter option. 
      
      
      
      
3. In Sort & Filter, configure the parameters, as shown in the following screen shot:
   
   
   
   
4. 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:
   
   

5. Click the Filtericon on the right side of the app, select the Account_ID column and click Contains. 
   
   
   
   
6. In the Account_ID contains search box, enter the appropriate value and press Enter. 
   
   
   

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

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

1. Specify the env option in the appropriate listener file of the paging grid widget, as shown in the following code snippet: 

   ct.env.options.widget.enableLoadOnScroll=true;

2. While configuring the app (widget) in App Designer, select the Paging Grid view type. 

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

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

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 example, 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.