Product changes

Save Application Themes to the Block Store

Written by Jelmer Kok | Nov 23, 2022 9:17:12 AM

With one of the latest releases of the Betty Block Platform, you can now save your application Theme to the Block Store to reuse it in different applications over and over again. With this feature, you can ensure that each application that you develop has the same Theme and its values applied by simply installing the Block defined in the Block Store.

By adopting this feature, you will experience an easier and faster way to get your Enterprise Theme values in place that leaves more time to spend on component styling and functionality part of an application. It also governs that each application can use the same Theme, which gives more control on how applications look like.

 

Let me explain how this feature works:

Saving a Theme to the Block Store 

If you open the Theme Builder in the development environment (IDE) of your application, you will now see a new 'Save as Theme Block' button at the top right of your screen. By clicking this button, you can save your Theme and its values to the Store by putting it inside of a Block (which is created automatically as well).

 

A modal to save the Theme to the Store will appear. This modal allows you to name your Block, the Theme, and to give the Block a descriptive text. After completing the form, the Block is automatically created and your Theme will be part of it.

 

Controlling my Block with Theme in the Store

Now your Block with Theme is created, you can find it in the Block Store. Open the Block Store from the builder bar on the left-hand side (look for the Store icon). The public scope of the Block Store is opened by default. Click on the 'Public Blocks' dropdown, select 'My Blocks' and you will be navigated to the scope where your Blocks can be controlled. 

 

Open the Tab with 'Dev Blocks' and use the search to easily find the recently created Block. Open the Block details to read it through, edit it, or release it to a defined target audience. 

 

From the Block details page, you can for example release its content, manage the owners and also update the permissions who may see and install it. In this blog, I will make this Block with Theme available for every Platform user within my  organization. To do this, you'll have to click the 'Permissions' button at the left-hand side. A form to update the installation permissions will open. 

 

We will change the installation permissions to 'Owners and organizations' in the dropdown. Below it, you can search for the Organization which you want to share this Block with. When you have selected your Organization(s) and you are good to go, then the only thing left is releasing its content. To get this done, you can click the primary green button in the menu at the left-hand side. 

If you want to know all ins-and-outs of controlling your Blocks in the Blocks Store, I'm advising you to go through all the Block Store docs online. You'll find them here.

 

Installing the Block with Theme in different Application

Once you have shared a Block with your organization and released the Block as well, organization members can find the released content in the Block Store. Members can install the Block from the Store in their Application(s) by clicking the 'Install Block' button. 

 

An Application selector appears. Select the desired Application that you would like to have this Block installed to and you are done. 

Be aware that installing a Block with a Theme inside of it will overwrite the current theme values of that Application. 

To have your updated Theme values in the Application being used in your Page Components styling, you'll have to recompile your pages (by clicking the Play button) after a Theme Block is installed. At the moment, this requires a manual click by the User. In the future, we will update this flow with an auto compiling process when installing Themes from the Store to make your life even easier. 

 

That was all for now, your feedback allows us to continuously improve our product. Please, let us know what you think about it. Happy building! 😃