Save and share your custom blocks – pages, page components, widgets, data sources, action steps, and themes – using Block Store. This capability provides a fast and simple method for acquiring reusable components and allows you to distribute them to developers in other organizations.
Page component
After you’ve finished customizing a component in Pages to your liking, click on it once to select this component from the canvas. Save as new button will be placed between the converting to partial and deleting component buttons at the bottom of the sidebar menu.
Give the component a name, select an icon from the icon library, choose an existing category. Below the category, see the Share via Block Store option:
- With the Block Store toggle off the component will be saved and available for all users in the current application. Press Create component to finish creating the block without sharing in Block Store.
- As you toggle on the option, you will be able to add this component to Block Store, to make it reusable for all your applications (and organizations who have access)
You can choose between creating a new block and adding to the existing one. If you choose the second - pick up the component block you’d like to be updated with a new one. Click Update component as you finish setting your new component.
If you toggle Shared block, the procedure repeats itself with the previous one, but this time you have to also select the block in which you’d like to update the component.
Page
To enable reusing the whole page via Block Store, press Save as template in the top right corner of your page.
When saving the page as a new template, add a new name and template description, then toggle Share via Block Store and then Save as template.
The partials on this page will be converted into page components. The data and actions will not be carried over when using this page template in another application.
For learning how to create a widget block, check out Create a custom widget article.
Data source
First, let’s briefly go through creating your own remote data source.
Open your application and go to the data model. On the right, you’ll see the block with data sources. Click New data source and on the new page again press Create data source.
Come up with a name for this data source and enter the metadata URL from the API description.
After this, press Connect and make sure to receive the ‘Connected’ message and the host URL. The host may differ per environment, so you can use the configuration on the right of it to set another host URL per sandbox environment. Lastly, hit Create data source.
Returning to the Models overview, you’ll notice that our newly created data source Swagger API Petstore is added to the data sources overview.
Click on it to open the settings. On the right, see Share in Block Store section and press Save as data source block to share this data source in the Block Store.
Finally, you can make the block available for either owners or the owners and current organizations and release it to Block Store.
Interested in how to create custom action steps (functions) and reuse them via Block Store? Read Sharing an action function via the CLI
Theme
Once you’ve customized the theme (1) of your application to your liking and now you want to save it to reuse later in other projects. To do this, you need to find and press Save as theme block in the top right corner of the theme builder (2).
Come up with a name, theme name, and description for your block in a new modal window. Then press Save as block.
Release a block
After adding any block to Block Store, you will automatically be the owner of that block.
Open Block Store from the builder bar. Public Blocks will be opened by default, click the dropdown and select My Blocks and you will be navigated to the overview where you can manage your custom blocks.
Use page filtering and click Dev blocks to see your blocks that haven't been released yet (in dev mode). Press Release to make the block available for reuse.
Manage and edit a block
After the block is released, look at the menu opened in the top right corner of this block's dev mode page. From this dropdown, you can manage your new block.
- Exit dev mode brings you back to the block overview page (where you can install it to your application
- Verify block as company developer (having the right permissions) - this way your customers can see that this block is approved and ready to use
- Unrelease your block to remove it from public use
- Visibility allows one to share blocks on different levels - among block developers, your organizations, cross-company or publicly.
- Finally, you can delete a block from the same dropdown menu.
Some additional editing options include filling the information about this block, adding URL to documentation and a Github page. Below, you can switch between the development and released content of this block.
Sometimes blocks may include more than one page element or functionality. In the example below, AI Search block contains several action steps you can use separately in your application.
Sidebar on the right displays block's details, like status, visibility, domain where it's maintained, etc. Having the right permissions, you can also add or remove block developers.
Discover more useful articles about the topic: