The challenge: Tracking onboarding steps consistently across every contact

1. The admin needs a single place to define and manage the master list of onboarding steps for the organization.
   
2. The sales rep needs that checklist surfaced directly on each contact's detail page so they can track which steps are complete for that contact.

Overview of the topping

1. A Settings widget that lets the admin define and manage the master list of onboarding checklist items for the organization.
   
2. A Related List widget that appears on every contact's detail page, displays the configured checklist, and lets the sales rep track progress for that contact with a live progress bar.

Prerequisites

Creating the widget project

Organizing the widget files

Building the Settings widget

Overview of the Settings widget logic

1. Initializing the widget: When the widget loads, the Bigin JS SDK fires the PageLoad event. We use this event to load any previously saved checklist into the UI, and then call ZOHO.embeddedApp.init() to confirm the widget is ready.
   
2. Adding and removing items: The addChecklistItem function renders an editable row for each item. Each row has a Remove button so the admin can drop items that are no longer needed.

Building the Related List widget

Overview of the Related List widget logic

1. Reading the contact context: The Bigin JS SDK passes the current record's ID through the PageLoad event. We store this as contactId, which is what lets us track checklist progress per contact.
   
2. Toggling items and tracking progress: When a checkbox is toggled, toggleItem flips that item's state and re-renders the checklist. The updateProgress function updates the progress bar, and shows the Onboarding Complete! banner once every item is done.
   

Testing the widgets locally

Embedding the widgets in the topping

What happens when the topping is installed