Zephr Classic User Guide

UI Components

140 views 0

A UI component is a block of code which can be used to replace content within a Transformation in a Feature Rule.

Unlike Zephr Forms, UI Components are written and managed by your team, with the code stored in Zephr and called upon when required within a Rule.

To create a UI Component, navigate to UI > UI Components within the Zephr Admin Console.

From here, click Add UI Component. This will open a page allowing you to create a Slug for your UI Component, and a code block for your to write or paste the code you wish to use.

When adding the Slug, make the name memorable, as you will use this name when adding the UI Component to a Feature Rule.

By default, new instances of Zephr include standard options for Login and Logout UI components, to be used as Transformations within the Nav Bar of your site, offering Login and Logout options to your Users.

To test your UI Component, click Save and navigate to the Zephr Feature Rule you wish the UI Component to be used within. Under the Transforms option in the Rule Builder Palette, drag the UI Component option onto your Canvas, select the UI Component created above. Attach it into your Rule, then click Save. You can then tag this new version of your rule and test it in Preview Mode before publishing the Rule. For details on how to do this, read our Tagging and Testing Rules guide.