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.
If you are unable to migrate at this time and want to access the old documentation for Inputs you can find them here.
The main Inputs component has now been deprecated in favour of the new Card Component.
The Card component can be initialzed via the
evervault.ui.card method in the JS SDK, or the
Card component in the React SDK.
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
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.
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.
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.
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.
default theme has been renamed to
To learn more about themes, check out the styling documentation for UI Components.
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
You can see the full structure for the new translations key here.
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.