Extending the UX Framework with the Component SDK

Lesson Overview

In this lesson, you will learn about the Component SDK and core concepts, specifically:

✓  What is the Component SDK?

✓  What can be extended by Component SDK?

✓  Why use Component SDK?

Let's begin!..

What is the Component SDK?

The Component SDK provides a development kit for extending the UX Framework Component Library. It provides modern developer-friendly tools for building OMX-ready custom components for use in Fluent Web Apps.

The SDK is based on React and TypeScript. While using these technologies is not a requirement, the SDK provides fully typed interfaces to all types via TypeScript and delivers Fluent-specific React-based Hooks for integrating with the Fluent Platform.

What can be extended?

Developers can create various types of components to extend the standard component library, including brand-new:

• Content components: used to display information, such as data on cards and lists, or even more graphical and visual information, such as images, maps, and charts.
• Layout / Page components: layout and page components facilitate screen layout.
• Interaction components: used to capture user input, such as buttons or card-based user action forms.
• Form field components: used to capture data in a form as part of a workflow-driven user action or mutation.
• Template helpers: utility functions for template strings in the manifest document that transform data in different ways, such as formatting, styling, and calculating.

By default, all custom components are immediately configurable via the Manifest document, except for field components, which are automatically chosen based on their type when generating a form.  The Component SDK also allows users to register new custom helper functions for Template Strings, which provides a great level of control and flexibility in how dynamic data is formatted on the screen.

Why use the Component SDK?

As part of our OMX Platform, the Component SDK provides developers with an industry-best practice toolkit for extending the UX Component Library. While our aim is to provide as many reusable components as possible as standard, we understand that our Clients may need more...

... and that's why we've built an SDK that makes building new Components as quick and simple as writing a small React Component, with all of the scaffolding built in. This means developers do not need to worry about making their components configurable via the manifest, handling authorization, data access, localization, or workflow interaction and adaption, as this is all taken care of by the framework itself! 

Additionally, the framework uses the Fluent OMX Design System, based on Material-UI, making it easy to deliver an industry-tested User Experience for all your custom components as standard.

By the end of this lesson, you should have a good understanding of what the Component SDK is, what you can use it for, and how to get started.

Let's get started!