Part 21: Working with snhttp to set rating on-load

Add Event handler to capture the params received from catalog page

• Navigate to Knowledge Article Page
• Create a Client script
• Set the name as Set Ratings
• Set the following script

/**
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 * @param {any} params.imports
 */
function handler({api, event, helpers, imports}) {
     const {
        context,
        state,
        setState
    } = api;

    const {
        snHttp
    } = helpers;

    const curentArticle = context.props.sysId;

     //Get Feedback for the current article
    snHttp('/api/now/table/kb_feedback?sysparm_limit=1&sysparm_query=article=' + curentArticle, {
        method: "GET",
        batch: false,
    }).then(response => {
        if (response.response.result.length > 0) {
            var rating = response.response.result[0].rating;

            //Update state
            setState('rating', rating); // Set rating

        }
    }).catch(error => {
        console.log('Error:' + error);
    });

}

Understanding the code snippet

• We are going to create a state called rating to store the rating
• We are Using Table API using snHttp Service line no 21
• This can be an alternative method from Data Broker to fetch data
• Once we get the result, We are setting the state to the rating we received on line no 29

Create State to store rating

• Goto Client State
• Click + Add to create state variable
• Set name as rating and type as number
• Click Save

Map Rating Component to this state property

• Goto Star rating 1 component
• Set Rating prop to following @state.rating
• Click Save

Hook this client script to the page ready event handler

• Select Body from the Content section
• On the properties pane, Click Add a new event handler on Page ready event
• Select Set Ratings from the scripts and click Add
• Click Save on the top to save the page
• When you refresh the Article page, Rating should be pre populated

Great!! We have successfully hooked event to display ratings on page load using snhttp service