Versions Compared

Version Old Version 1 New Version Current
Changes made by

kiran.kumari@intellectdesign.com

Lakshminarayanan1 S CTOO

Saved on

Key

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


Info Panel is an item with its own header and HTML content as body text that displays textual alerts, explanations, or information.


Image Modified


  • Containers & More > Information Fields > InfoPanel


Image Modified


The Info Panel's Display Name Key or Plain Label will appear as the Info Panel's Header Text. The Info Panel's value (use will appear as body text. To set a value for the Info Panel item, use the fm.setValue() method to set value) will appear as body text. For example, 

Code Block
languagejs
canvas.ns("canvas.form.listeners");

canvas.form.listeners.TandC_Form = Class(canvas.Observable, 
{
	constructor: function(config) 
	{
		this.fm = config.fm;
	},
	
	registerHandlers: function() 
	{	
		this.fm.registerHandler(CFEC.POST_FORM_RENDERER, function(fm, event, fieldName, value)
		{
			fm.model.setValue('TERMS',"I / We declare that the information provided herein above is accurate and complete.");
			// Here, TERMS is the Info Panel item ID.
		})
	}
});

CFLR.registerListener("FORM_TC", canvas.form.listeners.TandC_Form);
// Here, FORM_TC is the form ID.

The following table provides information about the properties that are applicable to this form item:
Image Removed

Image Added

#

Property

Description

Sample Values

1

Form ID

Unique ID of the Form on which you want to place the Form Item.

FRM_AUDIT_

RPT

REPORT

2

Item ID

Unique ID to the Panel.

AUDIT_RPT_PANEL

3

Item Type

To identify the item type in a form.

INFOPANEL

4

Channel

Assigns the form item compatibility for various devices

Desktop / Tablet / Mobile

5

Bundle Key

Name of the key associated with the property file which provides the localized label text for the current form item.
Form item bundle key supersede the form level bundle key. If this value is blank, form level bundle key will be used to find label keys.

Common

6

Plain Label

Text entered in

this field will appear

 Plain Label field appears as the label of the form item without the resource bundle key translation.

18.1:

If you are using the property files, leave

this Property

the Plain Label field as blank.
See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions.

Display Name Key

 is the property-driven label key for the form item. 
See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions.

19.1:

In Canvas 19.1, the Display Name Key field is a configuration-driven label key for the form item

INFO_HEADER_TEXT

. 

See About Display Name Key and Plain Label from 19.1 and Managing Display Names for Forms for more information.


7

Display Name Key

CONVERSION RATE DETAILS

8

Visibility

Selected: Shows the form item on the Form.
De-Selected: Hides the form item from the form, but the data will still be in active.

Selected

9

Print

Selected: Allows printing the form item while printing the form.
De-Selected: Does not print the particular form item while printing the form.

Selected

10

Column Span

Occupies the specified number of item spaces horizontally for the current item.

1

Print

Selected: Allows printing the form item while printing the form.
De-Selected: Does not print the particular form item while printing the form.

Selected

11Add Icon

Image Added
By making use of Add Icon option, you can add an icon to the form item. Perform the following steps for adding an icon to a form item: 

  1. ClickImage Addedicon to add an icon to the field. By default, the Left option gets selected, which paves the way for the icon to get placed on the left side of the form item's label, whereas if the option Right is chosen, then the icon gets placed on the right side of the form item's label. 

    Image Added

  2. ClickImage Addedicon to choose an icon for the form item. 

    Image Added

  3. Icons and Custom are the two available tabs. From the list of icons in Font Awesome, you can choose an icon of your choice. Click Search text field and type the name of the icon, which you wish to choose.  

    Image Added

  4. Default, Active, Disabled and Error are the four available options, categorized under the field, Choose icons for different state. You can assign separate icons for the four different states of Default, Active, Disabled and Error. Default indicates the default icon of the form item, whereas Active and Disabled depict the active and disabled states of the form item. When the selected form item is active, the chosen icon for Active state gets displayed and similarly, the icon, chosen for Disabled state, gets displayed, if the form item is in a disabled state. When an error occurs, the icon, which was selected for Error, gets displayed. 

    Image Added

  5. To add a customized icon, click Custom tab.  

    Image Added

  6. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly, without any fuss.  

    Image Added

    The customized image appears under the category of Custom Images. 
    Note

    If you upload a customized icon for the form item, ensure that you restart the app server, after saving the form. Make sure to log out from Canvas Studio and close the Studio application, before restarting the app server. If you do not restart the app server, the uploaded custom icon will not appear as the assigned icon for the selected form item.



    Image Added
Selected
12

Settings Menu: Total Number of Columns within a container

Arranges the form items within the form in the given number of columns.


Image Modified

2

13

Clone

Enables you to create a duplicate of the selected form item along with its applicable properties except for the Item ID.

2

...


Info

Switch property is not applicable for this form component.