Aplyca optimizes the editorial experience at Ibexa
WEB DEVELOPMENT, USER EXPERIENCE.
In the digital world, having a solid platform to manage content is a priority. In this context, Ibexa is a comprehensive and flexible solution that offers a set of tools and features designed to simplify content management, giving users the ability to organize, edit, customize and publish content seamlessly with a focus on user experience.
Through its Page Builder, users can easily create and manage landing pages. This tool consists of two main elements: blocks and layouts. Blocks are individual components that have specific functionalities (news lists and image galleries), while layouts are containers for blocks.
Defining layouts and blocks is a task that developers perform during the initial phase of a digital project. This way, when the main elements are in place, editors can use Page Builder to create landing pages and other content pages independently.
Over time, new needs may arise, so new blocks and layouts can be created or existing ones can be modified, and because content is decoupled from templates, updates can be easily implemented.
This is how Page Builder gives you complete freedom to build pages immediately instead of waiting for a long development process to implement changes.
However, if you are a developer or a content editor working with the Ibexa platform and its Page Builder, you have surely faced the fact that the changes you make are not displayed immediately, making content editing a time-consuming task.
For this reason, the Aplyca team developed a plugin that improves the editorial experience of content creators by allowing them to see the parameter changes in blocks in the platform's Page Builder immediately.
The main advantages are reflected in the fact that the content creation process is streamlined and the user experience on the Ibexa platform is improved, in addition to the fact that the plugin provides the freedom to develop interfaces with React.js and Vue.js.
In short, this module allows Ibexa Page Builder blocks that have been enriched using web frameworks such as React.js and Vue.js to be automatically updated within the Ibexa Page Builder itself when editors make changes, without the need to refresh the page or save a draft to preview it later.
Why Install the Ibexa Page Builder Plugin?
Installation of the package is a quick and easy process. It does not require extensive technical knowledge, nor does it require a long learning curve. In just a few steps you can have the plugin up and running and enjoy its immediate benefits.
With the installation of the plugin you no longer have to wait for a page refresh to see how the settings are displayed. This saves time and improves overall productivity.
The developed package is compatible with a wide range of IbexaDXP versions, including 3.3 and 4.x versions.
How to Install the Plugin for Ibexa Page Builder
Perform the installation in your frontend project or wherever you make use of your Javascript framework. It doesn't matter which version of Vue.js or React.js you use, just make sure you specify the version of Ibexa you are using and a fallback function that renders the block in an instance.
Install:
npm i @aplyca/ibexa-pagebuilder-block-refresher
2. Import the module in the same file where you created the framework instance. For example, in this case we use Vue.js and import it in src/main.js:
import { IbexaPageBuilderBlockRefresher } from '@aplyca/ibexa-pagebuilder-block-refresher';
3. In the same file that creates the instance of the framework, you must call the IbexaPageBuilderBlockRefresher function with two parameters. The first one must be a fallback and the second one must be the Ibexa version. The supported versions are: ezplatform, 3.* and 4.*.
IbexaPageBuilderBlockRefresher("3.*", function(blockElement) {
// Your code
});
It is recommended that your code be a new instance. Remember that there is no problem if you create a new instance in the same project, since in this case we will use a DOM blockElement that is temporarily generated by Ibexa. Here is an example with Vue.JS:
IbexaPageBuilderBlockRefresher("3.*", function(blockElement) {
// Create a new instance of blockElement div (its a temporary instance in the administrator)
new Vue({
el: blockElement
});
});
Remember that this plugin is Open Source and can be found in the Javascript repository: https://github.com/Aplyca/ibexa-pagebuilder-block-refresher
In a world where agility and efficiency are key, Aplyca enhances Ibexa's editorial experience, simplifying the process of creating and editing content with this plugin that transforms the editorial experience and strengthens the platform's ecosystem.
Contact Us
We are specialists in web development and implementing content management systems. We help you create optimal digital experiences for your customers. We invite you to learn about our success stories and contact us to discuss your project needs.
