跳到主要内容

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

PropertiesDescription
Default valuesets the initial value for the rating
Iconcustomize the icon or symbol used for rating
Max countthe maximum number of icons or stars that can be displayed in the rate component
Allow halfWhen the allow half property is enabled, it allows the user to select and display a rating with half-star increments
Allow Clearenables the option for the user to clear or reset the selected rating
LabelThe name of the field displayed to the user
CaptionA caption used to describe the field in detail
Hidden labelSet whether to display the label
PositionSet the position of the label relative to the component
AlignmentSet the alignment (align to left or right) of the label
WidthWhen the label is on the left side of the component, set the width ratio of the label.
Event HandlerTrigger queries, control components, or call other APIs in response to component events.
DisabledControl the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.
Read OnlyControl the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Required fieldValid only when the switch is on.
Custom ruleCreate your validation logic here. The rules should be made in JavaScript and covered by {{}}.
Hide validation messageYou 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.
HiddenDynamically 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”}}

PropertiesDescription
ValueInput 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

EventDescription
ChangeWhen 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 nameDescription
allowHalfa Boolean value indicted whether half rate is allowed
customRuleuser-defined rule or validation logic that can be applied to the component
disableda Boolean value indicates the disabled status
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the component.
hiddenhidden status (true or false)
iconthe icon or symbol used for rating
labellabel value
labelAlignalignment of input label (left or right)
labelPositionposition of input label (left or right)
labelWidththe integer representing width of label.
maxCountthe value of maximum count
placeholderplaceholder value
readOnlya Boolean value indicate the readyOnly status of input.
requireda Boolean value indicate the required status of input.
tooltipTextvalue of tooltip text
valueuser 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.

s3data

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.

rate_data

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

![rate_layout](https://cdn.illacloud.com/official-website/img/official-site/components/rate_layout.jpg)

Step 3 Configure the component

For the button component, we can configure it to set the value in rate component to the data of the document we read from s31 api.

  1. In the Edit event handler, select Control component in action, and select the rate component that you want to update as the target of the event.
  2. Choose the setValue action and set the value as {{s31.data}}

rate_config

Step 4 Test

Now that when you click the “Set value” button, the value should change to 111.

rate_test