Reusable components are a single control, a group of controls, or even a full page that are saved from a certain Zapps for reuse in additional Zapps throughout the Organization.
Reusable components are especially useful when building multiple Zapps from the same source web application or when multiple designers are building and editing multiple Zapps.
The following video demonstrates reusing the same highly stylized Zapp page throughout a Zapp, a common use case for reusable components.
Saving Reusable Components
Reusable components are saved or exported in the Style tab of the Capriza Designer.
Select the component you would like to save (a single control, a group or a full page).
Click on the "Export" button in the right hand corner of the toolbar.
Give the new component a name and click "Export."
You will receive a success message.
Once a component is saved, all the strengthening and styling attributes are also saved with it. When saving a full page, all the internal automations are also saved with it.
In order to export a group of controls, they must first be groups into a basic group, a floating bar or a bubble. Learn more about Grouping items.
If the page from which the component is exported is split, that is the styling for smartphone and large form factor is separated, the component will be saved with both styles, and, when imported into a new Zapp, both styles will apply.
Generally, the following rules apply:
- If the source page style is not split, a single style is saved and applied when the component is imported.
- If the source page style is split, both styles are saved and are applied if the target page is also split when the component is imported.
- If the source page style is split, both styles are saved. However, if the target page style is not split, only the smartphone style will be applied when the component is imported,.
Note that if a group of controls is saved and the page style is split, the parent group will only be saved in the form factor from which the component was saved. In the other form factor, the items in the group will be saved (and imported) as individual controls.
Using a Reusable Component in a Zapp
Reusable components are available to all designers in the organization. Once you export a component, it is added to the Common Components Library and can be used by any other user that has permission to build Zapps.
To import a component (i.e. a single control or group of controls), navigate to Simplify mode and click the "Import" button in the right hand corner of the toolbar.
The common components library will open.
You can search for the component's name using the available search box.
Once you've made your selection, click the "Import" button.
To import a full page component, select the Import option in the pages toolbar below the Zapp screen.
A new page will be added to the Zapp. You will need to create all the necessary incoming connections into and outgoing connections from this page.
You can also choose to import a page via the Declarative Pages widget. Please see the Declaring Pages article for more information.
Once imported, you may style your component or page just like any other control or page in the Zapp.
If you attempt to import a component or page that is not reflected in the source application, the Designer will proactively notify you in order to avoid errors later on in the Zapp building and testing processes.
For individual components, you will receive the following error message. You may click "Yes" to override the Designer.
For full Zapp Pages, the below message will display. Again, you may click "Yes" to override the Designer.
A component that was saved in a certain version of the Capriza Designer, is only associated with this specific release of the Capriza Designer. It cannot be used in older or newer versions of the Designer.
To update a component to a newer version of the Capriza Designer, you must update the original Zapp from which the component was saved, edit the component appropriately and then save it again as a new component.
Editing or Deleting a Reusable Component
Reusable components cannot be edited via the Common Components Library. To update your components, you may import it into a new Zapp, edit it, and save it as a new component. Alternatively, you can also edit the original Zapp from which the component was exported and save the component as a new component.
You can delete any component that you exported. If you have Org Admin privileges, you can delete any component that was exported by any designer.
Component versioning is not currently supported. Any update to a component must be saved as a new separate component in the library.