Add a rating to a Flow screen

Screen components from the Avonni Flow Components package collect input and display data inside screen flows. This tutorial adds the Avonni Rating to a screen, configures it like the Default example and reads the score after the screen.

Before you start, install Avonni Flow Components in your org and make sure the users who run the flow have a license for the package. Without one, the component shows a license message instead of the rating.

1. From Setup, open Flows and create a Screen Flow, or open an existing one.
2. Add a Screen element and open it.
3. In the components list on the left, search for Avonni Rating. Components from installed packages are listed under Custom.
4. Drag the component onto the screen and give it an API name, for example rating1.
5. In the Avonni property editor on the right, set Label to Rate your experience, Icon Name to utility:favorite and Value to 3. The property names and values match the Properties panel of this Playground.
6. Use the score in the rest of the flow. The component stores its output automatically, so later elements such as a Decision or a Create Records element can read it as {!rating1.value}.
7. Save the flow, then click Debug to run the screen and check the stored value.

The Code tab of the example shows the same field as it appears in the flow metadata:

<fields>
    <name>rating1</name>
    <extensionName>avcmpbuilder:rating</extensionName>
    <fieldType>ComponentInstance</fieldType>
    <inputParameters>
        <name>label</name>
        <value>
            <stringValue>Rate your experience</stringValue>
        </value>
    </inputParameters>
    <inputParameters>
        <name>iconName</name>
        <value>
            <stringValue>utility:favorite</stringValue>
        </value>
    </inputParameters>
    <inputParameters>
        <name>value</name>
        <value>
            <numberValue>3.0</numberValue>
        </value>
    </inputParameters>
    <inputsOnNextNavToAssocScrn>UseStoredValues</inputsOnNextNavToAssocScrn>
    <isRequired>true</isRequired>
    <storeOutputAutomatically>true</storeOutputAutomatically>
</fields>