17 Nov, 2024
Create State variables pageSize – Number – 3 pageCursor – String – Blank pageNumber – Number – 1 Add Client Script to Handle Navigation Goto Page Scripts Click +Add Give name as Handle…
Handle Navigation Event Remember, we added sys_declarative_action for the navigation for our EVAM Definition. Let’s dispatch the event now from the component when someone clicks on the item in the…
Let’s look at the final page after we have added the EVAM component on the Catalog page and understand how different details are showing up EVAM template sources For highlighted…
Navigate to UI Builder Navigate to Now Experience Framework > Experiences. Open the Experience for Panda Tech. On the right side of the form, Besides the Admin panel, Click on the (i) Icon to…
Navigate to View Config Navigate to Entity View Action Mapper (EVAM) > View Configurations Click Catalog items list On the right side of the form, Click View Template Click New Fill in the…

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 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 […]

1 min read

Part 20: Understand Mutation Data broker events

Understand event for Create Record Data broker Let’s take following snippet from the last post Typically, we have created an event handler client script that manages the event The very first line talks about the element for which the event is triggered Since the ID of the data broker is create_record_1 we are checking if […]

1 min read

Part 19: Add Confirmation Message

Add Event handler once the record is saved in kb_feedback table Goto Data Resources Select Create Record 1 Goto Events Section Expand Operation Succeeded event (This will be triggered after successful DB operation) Click Add New Event Handler Select Handler Star rating from the scripts section Click Save Update the Script to handle Operation Succeeded […]

1 min read

Part 18: Add event to save ratings

Add Event handler once the record is saved in kb_feedback table Goto Data Resources Select Create Record 1 Goto Events Section Expand Operation Succeeded event (This will be triggered after successful DB operation) Click Add New Event Handler Select Handler Star rating from the scripts section Click Save Update the Script to handle Operation Succeeded […]

1 min read

Part 17: Add rating component

Navigate to the knowledge article page and Add container for rating section Open on knowledge article page from UI Builder. From the Content section, After the Knowledge Content 1 Component. Click (+) to add a component to the container. In the search box, type Container and select Add. Keep the default layout Add Label and […]

1 min read

Part 16: Create a new page route for the Knowledge article page

Navigate to UI Builder Navigate to Now Experience Framework > Experiences. Open the Experience for Panda Tech. On the right side of the form, Besides the Admin panel, Click on the (i) Icon to open the Admin panel. Click Open UI Builder. Alternatively, Navigate to Now Experience Framework > UI Builder. From My experience, Click […]

2 mins read

Part 15: Edit container layout for catalog page

Change the container layout to add sidebars Open Catalog Page we created in previous tutorials Select Container 1 from the Content panel on the left Select Layout from the Properties panel Change the layout to the following Click Edit layout code Update grid-template-columns property from the layout. Update the layout to add some margin with […]

1 min read

Part 14: Adding a breadcrumb to the catalog page

Create Lookup Data broker to get the information about the Catalog item Navigate to Catalog Page Create a Data resource Click + Add Search for keyword lookup From the Data resources section select Look Up Record Click Add In the configuration section, Fill out the fields below Table – Catalog Item Record – @context.props.sysId Add […]

1 min read

Part 13: Add Onload Client script on the Catalog success page

Add Event handler to capture the params received from catalog page Navigate to Catalog Success Page Create a Client script Set the name as Set request number Set the following script Understanding the code snippet We are using restructuring here to extract table, sysId and number from the context props we got from catalog submit […]

1 min read

Part 12: Working with state

Understand State Now components has a built-in state object The state object is where you store property values that belongs to the page or component When the state object changes, the component re-renders. To change the state of the property, use setState method. Never use this.state metthod. Read more about State HERE Navigate to Catalog […]

1 min read