Rate
What is Rate?
The Rate component in ILLA Cloud is a powerful tool that allows users to add rating functionality to their applications. With the Rate component, users can display a set of stars or any other custom symbol and allow users to rate an item or provide feedback.
Properties
| Properties | Description |
|---|---|
| Default value | sets the initial value for the rating |
| Icon | customize the icon or symbol used for rating |
| Max count | the maximum number of icons or stars that can be displayed in the rate component |
| Allow half | When the allow half property is enabled, it allows the user to select and display a rating with half-star increments |
| Allow Clear | enables the option for the user to clear or reset the selected rating |
| Label | The name of the field displayed to the user |
| Caption | A caption used to describe the field in detail |
| Hidden label | Set whether to display the label |
| Position | Set the position of the label relative to the component |
| Alignment | Set the alignment (align to left or right) of the label |
| Width | When the label is on the left side of the component, set the width ratio of the label. |
| Event Handler | Trigger queries, control components, or call other APIs in response to component events. |
| Disabled | Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled. |
| Read Only | Control the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified. |
| Tooltip | Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported. |
| Required field | Valid only when the switch is on. |
| Custom rule | Create your validation logic here. The rules should be made in JavaScript and covered by {{}}. |
| Hide validation message | You can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript. |
| Hidden | Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value. |
Method
You can use other components to control the component. We support the following two methods:
- setValue
To set the rate value, for example, {{”value1”}}
| Properties | Description |
|---|---|
| Value | Input value |
- clearValue
To clear the value of the selected component
- validate
To verify that the input information is legal
- clearValidate
To clear the validation message
Event handler
| Event | Description |
|---|---|
| Change | When a user change the value, perform specific action customized by users. |
Data
The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.
| Property name | Description |
|---|---|
| allowHalf | a Boolean value indicted whether half rate is allowed |
| customRule | user-defined rule or validation logic that can be applied to the component |
| disabled | a Boolean value indicates the disabled status |
| displayName | the name of this component (ie button1) |
| events | generated or triggered when certain actions or events occur within the component. |
| hidden | hidden status (true or false) |
| icon | the icon or symbol used for rating |
| label | label value |
| labelAlign | alignment of input label (left or right) |
| labelPosition | position of input label (left or right) |
| labelWidth | the integer representing width of label. |
| maxCount | the value of maximum count |
| placeholder | placeholder value |
| readOnly | a Boolean value indicate the readyOnly status of input. |
| required | a Boolean value indicate the required status of input. |
| tooltipText | value of tooltip text |
| value | user input value |
Example: {{rate1.value}}
Use case
Next, we will demonstrate how to map the data from the data source to rate component with a button.
Step 1 Add an action
Let us create a table in Amazon S3. One of the documents is called
‘1.txt’ with the number ‘3.5’ as its data. This is the value we want to show in rate value.
Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.
Select Read an object for **Action Type**. Put 1.txt for **Object Key.**
Click Save and Run to activate this action.
Step 2 Add Components
Next, we can add a rate component and a button component to the canvas.
We set the default value of the rate component to be 0, label it as “Rate”, and labeled the button as “Set value” as shown below
Step 4 Test
Now that when you click the “Set value” button, the value should change to 111.
