1. Navigating to the Certification Items page

Overview

To begin working with Certification Items, permitted users must first access the Certification module. The Certification Items page acts as the central hub for all employee certification activities within the SurgeONE system. From this single interface, users can work on assigned certification items and depending on their role can review, approve, or reject certification package items' submissions.

Click on the Certification menu group of the left panel and then on the expanded Certification Items menu label.

Fig: 1 - Certification Items menu option

Clicking on this menu option loads the Certification Items page, showing a blank grid view if no package items are yet assigned to the logged-in user, or no such certification package is yet created in the system.

Fig: 2 - Grid view blank by default

All the listed Certification Items which are assigned to the logged-in user are displayed here. Here is the view of one such entry populating the grid view. These custom Certification Items can be responded to, commented upon and submitted for review, and subsequently approved and reviewed, or rejected, by the assigned personnel.

Fig: 3 - Certification Items page with added custom Certification Item

2. Understanding the Certification Items page elements

Overview

The Certification Items page brings together essential tools for managing package items with clarity and ease. A search bar enables quick access to specific items, while the grid view organizes key details in a clean, structured format. Action menus streamline task execution by providing direct links to relevant activities, and pagination ensures smooth navigation through larger datasets. Collectively, these components create an intuitive interface that simplifies interaction and supports confident certification workflow management within SurgeONE.

Refer to the following screenshot which is marked with numerical values that correspond to the below stated points.

Fig: 4 - Understanding the various elements of the Certification Items page

1. 1

   Search bar

   The search bar allows users to quickly locate assigned / submitted certification item entries using keywords.
2. 2

   Grid view

   Displays loaded or filtered results in a structured tabular format.
3. 3

   Action column

   Contains a vertical ellipsis icon to toggle row-context menu options.
4. 4

   Pagination options

   Controls page item limits and enables navigation across multiple pages of certification item entries.
5. 5

   Filter icon

   Opens the filter panel area where you can utilize various options to view specific grid view results.

2.1. Searching for Certification Items

---

Overview

The search feature enables users to quickly find specific certification entries by entering relevant keywords. This functionality is especially valuable when working with extensive lists, as it minimizes time spent scrolling and ensures precise retrieval of the required records.

You can use the search bar to enter text and find matching results.

Fig: 5 - Search bar to quickly find displayed Certification Items

The search operation gets executed on the Id, Package Name, Form Name, Submitted By, Submitted On and Status columns' data. Based on the text entered, matching results are listed out.

Fig: 6 - Filtered results

If no results are fetched by the executed search query, a No records found label in the grid view and a Showing 0 Records label is displayed below the grid view.

Fig: 7 - No matching records found

2.2. Understanding the grid view

---

Overview

The grid view organizes certification item entries into a clear, tabular format that makes information easy to scan and interpret. Each row corresponds to an individual package, while the columns display key attributes such as ID, name, submitted date, status, and more. Users can also sort column data in ascending or descending order, enabling quick prioritization and comparison based on specific criteria. This structured layout not only provides a comprehensive overview of all certification items at a glance but also supports efficient monitoring and management of submissions within the SurgeONE system.

The grid view displays all certification item entries which are assigned or finished by the logged-in user. The following columns are present:

Fig: 8 - Certification Items grid view

1. 2

   Package Name

   Displays the official name of the package as defined during its creation. This helps users identify which certification item or process the entry belongs to.
2. 3

   Form Name

   Displays the official title of the form included during the package creation. Helps users instantly recognize which process or requirement the form relates to.
3. 4

   Submitted By

   Shows the name of the individual who submitted the package, ensuring accountability and easy traceability.
4. 5

   Submitted On

   Displays the exact date when the package was submitted, supporting timely reviews and compliance monitoring.
5. 6

   Status

   Reflects the current state of the item (for example Pending, Completed, etc.), enabling users to monitor progress across items.
6. 7

   Action

   Contains a vertical ellipsis icon to toggle the row-context View menu option.

2.3. Using the Action column menu options

---

Overview

Each certification item entry in the grid view has an Action column that provides quick access to package items' management options. This design ensures that users can perform relevant actions directly from the grid without navigating away from the page.

Click on the vertical ellipsis icon against any displayed row entry of the grid view to toggle the row-context menu option.

Fig: 9 - Action menu option

The following menu option is present:

1. 1

     View

   Used to view the package item without the ability to make any modifications to the responses.
2. 2

     Edit

   Used to modify a package item field responses or the current status which is not yet submitted.

2.3.1. Using the View menu option

---

Overview

Selecting the View option enables users to open and review a listed package item in its entirety. This feature is particularly valuable when users need to understand the structure of the form and purpose of the package item, revisit the information it contains, or examine the responses that have already been submitted. By providing full visibility into both the package item content and the recorded inputs, this option supports better decision‑making.

1. Click on the vertical ellipsis icon under the Action column, against any displayed row entry of the Certification Items grid view to toggle the row-context menu option labeled as View.

Fig: 10 - Clicking on the View menu option

2. After clicking on it, the following page loads to display the form as per its layout and questions structure.

   Fig: 11 - Viewing the form page

3. You cannot choose the next action in view mode, but you can close the page using the Cancel button.

Refer to the following screenshot which is marked with numerical values that correspond to the below stated points about the various UI elements. All fields are displayed in read-only state.

Fig: 12 - Certification Items view page elements

1. 1

   Certification Items Title

   • What it is: The name of the form (e.g., Political Contribution Certification Items).
   • Why it matters: Helps you check which form you're viewing or working on.
   • Typical actions: Used for orientation and reference in usage.
2. 2

   Info Icon (Tooltip on Hover)

   • What it is: A small tooltip displayed on mouse pointer hover on the info icon. If present, the icon is adjacent to the displayed title.
   • Why it matters: Enables a quick glance at the description of the form.
   • Typical actions: Reveal a tooltip which displays the entire form description.
3. 3

   Submission Name Field

   • What it is: A text input to enter the full name of the user who is submitting.
   • Why it matters: The Submission Name field gets added at the top of form when Submission Name Required? slider was enabled in the form. If it was not enabled, then this field is not present in the rendered form.
   • Typical actions: Entering the submitter's name helps to understand who had submitted the form.
4. 4

   Section Header

   • What it is: Displays the form structure, sections and questions of each for user to view the entire form content.
   • Why it matters: Organizes the page into meaningful sections (as designed) and improves readability.
   • Typical actions: Scroll to view multiple form sections (if present) and questions present in a section, as well as understand the form layout.
5. 5

   Generic Form Fields

   • What it is: Standard input elements present in the section to capture user data such as text, numbers, dates, or selections in non-view mode.
   • Why it matters: Collects essential information required for processing the form and completing the workflow.
   • Typical actions: Enter the requested value, select from options, or confirm consent before submission.
6. 6

   Current Status Tag

   • What it is: A color-coded status indicator (e.g., Pending).
   • Why it matters: Helps you plan your course of action by referencing to the current status.
   • Typical actions: View it to check the current status of the form.
7. 7

   Cancel Button

   • What it is: A button to exit without committing changes.
   • Why it matters: Prevents unintended edits or submissions.
   • Typical actions: Click to close or return to the Certification Items page. In some instances, a confirmation modal window gets prompted by the system to obtain your confirmation of exiting this page, since unsaved changes get discarded on exit.
8. 8

   Comment Icon

   • What it is: An icon which allows users to post or view comments related to the form or certification workflow.
   • Why it matters: Facilitates communication and collaboration of involved users to provide context, clarifications, or feedback, without leaving this page.
   • Typical actions: Click the comment icon to open the comment panel, type your message, and submit. Use it to share notes or respond to queries without leaving the form.
9. 9

   Workflow Stage Indicator

   • What it is: Current stage label and other stage icons displayed as per the configuration.
   • Why it matters: Shows the current review stage and other stages when configured to various workflows, which may require a reviewer or approver participation in the custom item's lifecycle.
   • Typical actions: Read-only labels displayed on mouse hover over present icons as per the configured stages and indicates the current one.
10. 10

    On Screen Info Tab

    • What it is: A tab that reveals guidance or instructions related to the form.
    • Why it matters: Provides in context help as configured during item creation.
    • Typical actions: Click to read tips while filling the form as it ensures entries meet policy.
11. 11

    Instructions Tab

    • What it is: A tab showing detailed instructions and rules (e.g., compliance, legal notes).
    • Why it matters: Clarifies mandatory information, acceptable inputs, and constraints as configured.
    • Typical actions: Review before submitting to avoid rework or rejection.
12. 12

    Audit Trail Panel

    • What it is: A chronological log or timestamp which is by default present as a collapsed section.
    • Why it matters: Enables traceability as it reveals who did what and when.
    • Typical actions: Expand panel area to see entry details as per activity performed, for compliance checks, auditing and reporting.
13. 13

    Close Information Panel

    • What it is: A control that collapses the right-side information panel containing the On-Screen Info tab (#10), the Instructions tab (#11), and the Audit Trail section (#12) when they are in open or expanded view.
    • Why it matters: Frees up workspace by hiding guidance and history panels, reducing visual clutter. It also prevents accidental interactions with auxiliary content while performing tasks.
    • Typical actions: Click to collapse the panel. Reopen as needed by clicking on the collapsed panel for contextual help, instructions, or to review audit logs when needed.

2.3.2. Using the Edit menu option

---

Overview

The Edit option allows users to modify existing Certification Items to meet specific requirements. This feature is beneficial for updating outdated information, correcting errors, or customizing fields to align with organizational needs. By enabling edits, users can maintain accuracy and relevance, ensuring that the form collects the right data for its intended purpose. It also reduces the need to create new Certification Items from scratch, saving time and effort.

Edit menu option is visible ONLY against certification package (items) which were submitted by logged-in user and having Pending Status.

---

1. Click on the vertical ellipsis icon under the Action column, against row entry of the Certification Items grid view to toggle the row-context menu option labeled as Edit.

Fig: 13 - Clicking on the Edit menu option

2. After clicking on it, the following page loads to display the form as per its layout and questions structure. You can provide responses to the form fields wherever applicable and update the status by choosing Submit or Cancel of the Select next action dropdown at the bottom-right.

   Fig: 14 - Certification Items edit page

NOTE: You cannot modify the form structure, section or question fields configuration in edit mode. You also cannot make changes to the on-screen information or form instructions. All these actions can be performed in Forms Library page, only if the form is having In Progress status.


3. Choose Submit to set the form status to Pending Review or Cancel to set the form status to Cancelled. Get redicted to the Certification Items page where you can find this form with its status updated in the grid view.

   Fig: 15 - Submitting a Certification Items from the edit page

However, if you click on the button without responding to all of the mandatory fields of the form then the following validation gets prompted.

Fig: 16 - Validation on submitting an Certification Item

2.4. Pagination

---

Overview

Pagination controls allow users to navigate through multiple pages of certification item entries in a structured and efficient manner. Instead of displaying all records at once, which can impact performance and clutter the interface, the system organizes entries into manageable pages. This approach improves loading speed, enhances usability, and makes browsing large datasets more intuitive. By using pagination options, users can quickly move to the exact set of records they need without excessive scrolling, ensuring a smooth and focused experience when managing certification items.

Pagination options are provided at the bottom-bar. Refer to the below cards to understand better.

Fig: 17 - Pagination options

The numeric values indicate in the above image correlate with the following cards.

1. 1

   Record Range Indicator

   Displays (at the bottom-left) the current range of records being viewed along with the total number of entries (e.g., Showing 21–40 of 44 entries).
2. 2

   Page Number Navigation

   Allows users to jump directly to specific pages using numbered buttons. The active page is visually highlighted for easy identification.
3. 3

   Previous and Next Controls

   Provides Previous and Next buttons to move sequentially between pages of grid results.
4. 4

   Rows Per Page Selector

   A dropdown at the bottom-right that allows users to choose how many records are displayed per page. Selectable options are 10, 20, 50 and 100. By default, 20 is set.

2.5. Using the filters

---

Overview

The Certification Items Filter allows users to narrow down the grid view results by applying multiple criteria. This filter helps users quickly locate specific certification records by package, form, submitter, or status, improving efficiency when working with large datasets.

The filter panel opens from the right side of the screen when the filter icon is clicked upon. It contains a set of dropdown fields and action buttons that control how certification items are displayed in the grid.

Fig: 18 - Filter icon

The Certification Items filter is commonly used to:

1. Focus on certification items in a specific status (e.g., Pending or Completed)
2. Review submissions from a particular user
3. Isolate records related to a specific package or form
4. Reduce clutter and improve visibility in the grid view

Benefit: The filter panel provides precise control over grid view results, helping users quickly locate relevant certification items, reduce manual searching, and work more efficiently.

Fig: 19 - Filter panel expanded view

1. 1

   Package Name

   • What it is: A dropdown list showing all available certification packages. A numeric value is present within parenthesis against each listed label to indicate the count of each certification package.
   • Why it matters: Helps narrow grid results to items related to a specific certification package.
   • Typical actions: Select All to view every package or choose a specific package to filter the grid.

Fig: 20 - Package Name filter dropdown showing certification packages with count

2. 2

   Form Name

   • What it is: A dropdown that lists certification forms available within the system. A numeric value is present within parenthesis against each listed label to indicate the count of each form.
   • Why it matters: Useful when multiple forms exist under the same certification process.
   • Typical actions: Select All to view all forms or choose a specific form to refine results.

Fig: 21 - Form Name filter dropdown listing available certification forms with count

3. 3

   Submitted By

   • What it is: A filter that displays certification items based on the submitting user. A numeric value is present within parenthesis against each listed label to indicate the count of each user's submission.
   • Why it matters: Helps identify records submitted by a specific individual or group.
   • Typical actions: Select All to include all submitters or choose a specific user.

Fig: 22 - Submitted By filter dropdown displaying user-wise submission counts

4. 4

   Status

   • What it is: A dropdown showing certification workflow statuses along with record counts. A numeric value is present within parenthesis against each listed label to indicate the count of each status.
   • Why it matters: Allows users to focus on items at a specific stage such as Pending, In Progress, or Completed.
   • Typical actions: Select a status like Pending Approval or Rejected by Reviewer to update the grid view.

Fig: 23 - Status filter dropdown showing workflow statuses with record counts

5. 5

   From Date

   • What it is: A date selection field used to define the start date of the filter range. Selecting a date opens a calendar picker showing a monthly view.
   • Why it matters: Ensures that only records created or updated on or after the selected start date are included in the grid results.
   • Typical actions: Click the calendar icon, navigate between months if needed, select a date, or use the Today option for quick selection.

Fig: 24 - From Date field with calendar picker for start-date selection

6. 6

   To Date

   • What it is: A date selection field used to define the end date of the filter range, working in conjunction with the From Date.
   • Why it matters: Limits grid results to records created or updated on or before the selected end date, completing the date range filter.
   • Typical actions: Select an end date from the calendar picker, clear the selection using Clear, or adjust the range before applying the filter.

Fig: 25 - To Date field with calendar picker for end-date selection

7. 7

   Apply and Reset

   • What it is: Action buttons used to apply or clear selected filter criteria.
   • Why it matters: Ensures users can easily control when filters take effect or return to the default view.
   • Typical actions: Click Apply to refresh the grid with filtered results or Reset to restore all filters to All.

Fig: 26 - Apply and Reset buttons used to apply or clear filter criteria

Based on the filters applied, grid view results appear. The applied filters can be seen above the grid view. A cross icon is present against each applied filter to remove it individually. The count of filter criterion applied are indicated beside the filter icon. The filter icon color changes to light blue color.

A reset filters icon also appears next the filter icon. Click on it to remove all applied filters at one go.

Fig: 27 - UI changes after filter condition application and grid view result fetched based on filters

A No records found label appears in the grid view when applied filter conditions do not fetch any matching certification items.

Fig: 28 - No results fetched based on filters

2.6. Certification Package Item Lifecycle

---

Overview

Forms of the certification package items move through a lifecycle that starts from (Pending → Pending Review → Pending Approval statuses) and continues through on-screen actions performed by specific pool users (Submitter, Reviewer, Approver) towards its completion (Completed status).

Depending on how the workflow is configured for a package item' form, different designated users can act at different stages. The workflow configuration determines which roles act at which stage. The final endpoint is Completed status. The review process allows designated users to carefully examine a submitted item before it moves forward in the workflow. For example, submitted certification package item needing review appear in the Certification Items module of all users in the selected Reviewers' Pool.

2.6.1. Certification Item (Form) Lifecycle Stages

---

Overview

The workflow users belong to the following pools: Submitter → Reviewer → Approver. Multi-level governance ensures accuracy and compliance. Item (form) data moves through review and approval stages.

1st Stage of Certification Item Lifecycle → Submitter Step

---

1. Certification Package Creation: Submitter navigates to the Certification Packages page and creates the package by selecting the form(s) and employee(s).
2. Form Fill-up: Submitter navigates to the Certification Items page, clicks on the Edit option of the Action column, and fills up the form by providing responses to all the mandatory fields of the chosen form. Submitter can save draft, cancel, or submit the form.
3. Submitter submits: Let us consider the Submitter chooses the Submit action from the Select next action dropdown of the form page and clicks on Submit button. The form status updates to Pending Review and the Reviewer workflow begins. If notification triggering was enabled during the form creation process, email gets triggered to the next stage user.

Fig: 29 - Submitter Step

2nd Stage of Certification Item Lifecycle → Reviewer Step

---

When reviewing and approval workflow is configured, the supported actions of the assigned Reviewer (belonging to the chosen user pool) are as follows:

• Return: Back to Submitter
• Reject: Ends workflow
• Reviewed: Routes to Approver

Reviewer opens this package item (form) with Pending Review status by clicking on the View option of the Action column, chooses Reviewed action from the Select next action dropdown and clicks on Submit button in the form for approval, after providing relevant information / notes via comments, to initiate the Approver workflow. If notification triggering was enabled during the form creation process, email gets triggered to the next stage user. The form status updates to Pending Approval and the Approver workflow begins.

Fig: 30 - Reviewer Step

3rd Stage of Certification Item Lifecycle → Approver Step

---

When reviewing and approval workflow is configured, the supported actions of the assigned Approver (belonging to the chosen user pool) are as follows:

• Return: Back to Reviewer
• Reject: Ends the workflow
• Approver: Completes the workflow

Approver opens this package item (form) with Pending Approval status by clicking on the View option of the Action column, chooses Approved action from the Select next action dropdown and clicks on Submit button, after providing relevant information / notes via comments, to complete the workflow. If notification triggering was enabled during the form creation process, email gets triggered.

Fig: 31 - Approver Step

Here is the view of the completed form.

Fig: 32 - Completed form view with no further action button / option

Notifications get triggered in the application during the various lifecycles of the item and can be view in the expanded notifications panel.

Fig: 33 - Notifications related to certification item progress listed in notifications panel

---