We have recently deprecated Inputs in favour of our new UI Components product. This page serves as a guide on how to migrate your code from using Inputs to UI Components.

The Card Component

The main Inputs component has now been deprecated in favour of the new Card Component.

Initialization

The Card component can be initialzed via the evervault.ui.card method in the JS SDK, or the Card component in the React SDK.

Mounting

With inputs, the component was mounted to do the DOM as part of the initialization step. With UI Components, we have separated this out and components must be explicitly mounted to the DOM via the mount method.

Note how before, inputs expected the name of a DOM node id, whereas UI Components can be mounted to any node matching a given CSS selector. The mount method accepts either a CSS selector or a previously selected DOM node.

The React SDK automatically handles the mounting step for you.

Change events

The Card component will trigger a change event just like inputs, however, the structure of the payload has changed. You can see the structure for the new payload here.

Ready events

Inputs had an isInputsLoaded attribute, which you could await to detect when the iframe was ready to be shown. With UI Components, we now trigger a ready event instead.

Styling

One of the biggest differences between UI Components and Inputs is our new approach to styling. Previously, we provided a set of premade themes and allowed you to override specific values via configuration options. With UI Components, you can now customize any CSS values inside of the iframe by using themes. A theme is just an object with a styles key. This styles key uses a CSS as JS format to define the CSS rules for the page. To help you get started, the SDK's have export the same three premade themes that inputs had before as UI Component themes.

Note: The default theme has been renamed to clean.

To learn more about themes, check out the styling documentation for UI Components.

Localization

Inputs allowed you to customize the copy within the iframe via various config options. UI Components provides the same functionality, however, the translations are now passed as a single object under the translations key.

You can see the full structure for the new translations key here.

Reveal

The previous version of reveal required you to have an endpoint that returned a specific JSON payload. With the new version of reveal, this payload can be whatever structure you like. It also doesn't have to be just card data, you can use Reveal to display any sensitive data you like!

Previouly, Reveal was a single component that was built to show card data. Now reveal is broken up into multiple components that allow you to reveal any payload field you like. First, you create the main Reveal component which carries out the request. Then you create consumer components and use JSON Path to select the response payload field you want to display.

You can read more about the new Reveal component here.