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

Add HTML Container

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

Initialize Result Component

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

Mount Component

result.mount("#form");

Configuration Options

Basic Properties

interface ResultConfig {
  name: "RESULT";            // Screen identifier
  type: "manual";            // Flow type
  state: ResultState;        // Screen state
  title: TitleConfig;        // Title configuration
  descriptions: Description[]; // Description array
  cta: CTAConfig;           // Call-to-action button
}

State Types

type ResultState = | "SUCCESS" /* Success completion */
| "FAIL" /* Operation failed */
| "PARTIAL" /* Partial match */
| "PENDING"; /* In progress */

Component Parts

Title

interface TitleConfig {
  label: string;
  style?: "ff-title";
}

Descriptions

interface Description {
  label: string;
  style?: "ff-description";
}

CTA Button

interface CTAConfig {
  label: string;
  style?: "ff-button";
}

Event Handling

Listen for Result Events

// Component loaded
oneSdk.on('form:result:loaded', () => {
  console.log('Result screen loaded');
});

// Success button clicked
oneSdk.on('form:result:success', () => {
  console.log('Success action triggered');
});

// Failure button clicked
oneSdk.on('form:result:failed', () => {
  console.log('Failure action triggered');
});

Event Name	Description
`form:result:loaded`	Emitted when screen loads
`form:result:success`	Triggered on success screen button click
`form:result:failed`	Triggered on fail screen button click
`form:result:partial`	Triggered on partial match button click
`form:result:pending`	Triggered on pending screen button click

Styling Guide

Title

.ff-title {
  /* custom css */
}

Subtitle

.ff-subtitle {
  /* custom css */
}

Description

.ff-description {
  /* custom css */
}

Logo

.ff-logo {
  /* custom css */
}

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

OneSDK

Smart UI (for deprecation)

Available Result Types

Success

Fail

Partial Match

Pending

Quick Start

Configuration Options

Title

Descriptions

CTA Button

Event Handling

Styling Guide

Title

Subtitle

Description

Logo

Styling Best Practices

​Available Result Types

Success

Fail

Partial Match

Pending

​Quick Start

​Configuration Options

Title

Descriptions

CTA Button

​Event Handling

​Styling Guide

Title

Subtitle

Description

Logo

Styling Best Practices

Available Result Types

Quick Start

Configuration Options

Event Handling

Styling Guide