Result

The Result screen is a versatile component that displays outcome messages at any point in your onboarding flow. It handles both success and failure scenarios, and can be embedded anywhere in your application.

Available Result Types

Success

Displays when a process completes successfully

Fail

Shows when an operation encounters an error

Partial Match

Indicates when some criteria are met but others aren’t

Pending

Represents operations that are still in progress

Result screen types

Result screen variations

Quick Start

1

Add HTML Container

1<div id="form"></div>
2

Initialize Result Component

1const result = oneSdk.component("form", {
2  name: "RESULT",
3  type: "manual",
4  state: "SUCCESS",
5  title: { label: "Complete" },
6  descriptions: [{ label: "Process is now complete. You can close the page" }],
7  cta: { label: "Done" },
8});
3

Mount Component

1result.mount("#form");

Configuration Options

Event Handling

Listen for Result Events
1// Component loaded
2oneSdk.on('form:result:loaded', () => {
3  console.log('Result screen loaded');
4});
5
6// Success button clicked
7oneSdk.on('form:result:success', () => {
8console.log('Success action triggered');
9});
10
11// Failure button clicked
12oneSdk.on('form:result:failed', () => {
13console.log('Failure action triggered');
14});
Event NameDescription
form:result:loadedEmitted when screen loads
form:result:successTriggered on success screen button click
form:result:failedTriggered on fail screen button click
form:result:partialTriggered on partial match button click
form:result:pendingTriggered on pending screen button click

Styling Guide

Title
1.ff-title {
2  /* custom css */
3}
Subtitle
1.ff-subtitle {
2  /* custom css */
3}
Description
1.ff-description {
2  /* custom css */
3}
Styling Best Practices
  • Use CSS classes for consistent styling across all result screens
  • Override specific styles using the configuration object when needed
  • Keep styling consistent with your application’s theme
Built with