This field-level component allows to write a signature and store it in a 'text' field as an svg base64 file. You need to make sure that the field property is of type text and is long enough to store a complete base64 image (set the length to 50000). The same content can be rendered as read-only and will display the svg as an image.

If you want to display the signature inside a PDF, pass the text field as an image inside the correspondence template.

The component supports the following functionality:

• 3 types of views are supported by default: Monthly, Weekly and Daily - Weekly and Daily shows an hour timeline whereas Monthly only show the day.
• Monthly view render the appointment as large card with field values whereas Weekly and Daily only render the title of the appointment.
• For hourly views - the range is from 7 AM to 7 PM.

• The widget is configured by passing a list Data page that provides all the instances of this case type or Data Type.
• Another parameter called Create case className will show the Create button if this parameter is set and let you create new case directly from the calendar. Provide the ID of Case or Data object.
• The component provides a configuration option to map date and time field names to different fields from the data page. This configuration is optional — if you don’t provide custom values, the widget will use the following default field names:
  • SessionDate (Define this as Date only field)
  • StartTime (Define this field as text and ensure the value is of format HH:MM)
  • EndTime (Define this field as text and ensure the value is of format HH:MM)

The banner input can be used inside a form to display some information to the user. Apply this component to a field of type text paragraph. The banner is usually display on change on another input field.

Once published, this component will be available with the name "Banner Input" in the "Display As" options of a Text Paragraph field.

The metadata to configure this field consists of 3 values:    

• Value - The value to display in the banner input (String)
• Variant - variant of the banner input ('success', 'Info', 'pending', 'urgent', 'warn') 
• Icon - Icon to use

Select "Password Input" from the available "Display As" options on a field of type text.

The masked input component should be used to enter a text field that follows a specific format like Social a Security Number or a ZIP code. The input mask allows to constrain the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping.

A pattern string is passed to the component as the 'mask' parameter to indicate how the text string should be formatted.

The supported values for the mask are:

• 0: Numeric (0–9)
• a: Alphabetical (a–z or A–Z)
• A: Uppercase alphabetical (A–Z)
• *: Alphanumeric (0–9, a–z, or A–Z)
• [] - make input optional
• - include fixed part in unmasked value

This component should only be used for text fields. 

The base64 of the PDF to be displayed, should be assigned to the respective field, to render the PDF inline inside the form.

"Text" is the supported field type for this component. Once installed to a provider, the "Display PDF" component will be available in the "Display As" options of a Text field type, for that specific Provider.

Configuration fields to turn on / off the toolbar in the PDF viewer and set the width and height of the PDF document, will be available in field meta data.

Field Configurations:

1.) Trend data if showing a percentage or trend of values:

• comma-separated string representing the values to trend
• Percentage or Currency fields to show the trend of the specific value (up or down).
• Leave this blank if you just need the actual field in color.

2.) colorMode:

       Color used to render the value - 'auto' will use the default theme color - 'trend' will use the color           based on the trend value. otherwise will use the color provided as a string (Ex orange, blue,                   purple)

• To display trend of a field over a reporting value - Provide values as comma separated string.
• To display a currency or percentage value based on the trend (positive or negative), provide the value to be compared with in Trend Data prop.
• Use renderingMode='badge', to display value within a colored badge.

The widget can render the links on a single row (displayType = 'simple') or group them by category. When using the 'grouped' displayType, a JSON object must be passed as a string.

Widget Configurations:

•  displayType: Display type of rendering (simple, grouped).
  
•  names: Label of each page (comma-separated) - only used if displayType is simple.
• pages: Name of each page or link, comma-separated list -  only used if displayType is simple.
• pageJSON: JSON object passed a string - only used if displayType is grouped.
  
  Example JSON object: 
  {"categories": [{ "heading": "Category1", "links" : [{ "name": "Page1" , "page": "Data-Portal.Page1"}, { "name": "Page2" , "page": "Data-Portal.Page2"},{ "name": "Page3" , "page": "Data-Portal.Page3"}]},{ "heading": "Category2", "links" : [{ "name": "Page4" , "page": "Data-Portal.Page4"}, { "name": "Page5" , "page": "Data-Portal.Page5"},{ "name": "Page6" , "page": "Data-Portal.Page6"}]},{ "heading": "Category3", "links" : [{ "name": "Welcome" , "page": "Data-Portal.Page1"}, { "name": "Information" , "page": "Data-Portal.Page2"},{ "name": "Help" , "page": "Data-Portal.Page3"}]}]}
  

• Product Gallery: Display a Carousel of product images that update based on user selections or current promotions.

• User Profile Carousel: Show a collection of user-uploaded photos or media.

• Dynamic Advertisements: Rotating Carousel for dynamic ad Carousels or promotions fetched from a backend system.

This is a field level component is available on a field of type: URL.

The url of the iframe is set to the value of the input field. 
The height can be set to a fixed height or auto - if auto is selected, the iframe is resized automatically to align with the iframe content.

When the mode is set to 'auto', the browser will block any access to the content of the iframe if the url is on a different domain due to cross-Origin resource sharing (CORS).

Make sure that the embedded site sets "access-control-allow-origin" in the response header to the domain of the main document. If this is not set, you will see the following error in the console:

Refused to display 'https://xxxx' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This field-level component allows to render an integer field as a 'star rating' field.

This component once installed will be available in the "Display As" options of an Integer field.

The maximum number of stars ranges from 3 to 5. This configuration is named "Maximum Rating" and is available in the meta data of field configuration.

The Range slider allows to filter a set of objects by a range value - the fields could be integer, decimal or currencies. If the value is a currency, set the currencyCode value.

The "minimum value property" and the "maximum value property" determines the start and end of range marked on the slider.
The view to refresh, on change of slider, should be passed to the region of the template. Within this view the references displayed should be source by a parameterized data page. The parameters of this data page should be the "minimum value property" and the "maximum value property".

The QRCode field will let you generate a QRCode. The field property associated with the component will store a base64 svg image of the QRcode. If the component is inside a form and editable, it is possible to enter an input property that will be used to generate the QRCode on the client. If the component is marked as readonly, the field property will render the barcode image directly. You need to make sure that the field property is of type text and is long enough to store a complete base64 image.

If you can want to display the QRCode inside a createPDF shape, you can pass the text field as an image inside the section rule configured to generate the PDF.
For an error free usage, mark the field "Auto" and assign a different field to "Input Property" meta data. This Input Property should be assigned the actual value to be displayed as a QR Code.

The Barcode field will let you generate different formats of barcode. The field property associated with the component will store a base64 svg image of the barcode. If the component is inside a form and editable, it is possible to enter an input property that will be used to generate the barcode on the client. If the component is marked as readonly, the field property will render the barcode image directly. You need to make sure that the field property is of type text and is long enough to store a complete base64 image

If you want to display the barcode inside a PDF, you can pass the text field as an image inside the section rule configured to generate the PDF.

To make the component error free and robust, ensure the Bar Code field and the "Input property" fields are different, with this configuration, changing the value of the input property in the form, the barcode is automatically re-generated.

The widget is configured to receive a Data Page as parameter that will point to a list of cases or data objects.

You can configure the icon to use for the utility widget, and the list of properties to show a primary and secondary fields. The list of secondary fields can be a comma-delimited string of several properties. In the current implementation, all the properties are handled as string except if the type is set to 'date'. You can set the type of each secondary field using the property secondaryFieldTypes.

This component follows the design of the other utility widgets and will only shows the first 3 items in the list. If the data page returns more than 3 items, it will show a 'view all' button to render all the items in a modal dialog.

When adding the widget to case type, add it within the UTILITIES section (below followers and attachments) in the UX tab of case type.