[Question]Is it possible to customize a block which load data from database
Question
For example, I want to create a complex custom navbar block. It has several first level navigations, and each of one also has several second level navigations. The data of navbar is loaded from database. And when I drag it to the canvas, I can modify properties in trait to change the data navbar loaded. Also, when I export template, I want the code is just html, not js contains ajax request, something like server side rendering.
Is it possible?
Answers (1)
Sure, but in that case, I'd suggest you create a custom component.
Here an example/pseudo-code of triggering an async function for changing the component content
editor.DomComponents.addType('my-custom-component', {
model: {
defaults: {
endpoint: 'http://A', // some prop for the trait
traits: [
{
type: 'select',
name: 'endpoint',
changeProp: 1,
options: [ 'http://A', 'http://B' ],
}
]
},
init() {
this.listenTo(this, 'change:endpoint', this.refreshContent);
this.refreshContent();
},
async refreshContent() {
const { endpoint } = this.attributes;
const response = await fetch(endpoint);
...
let result = '';
// ... Build the HTML result from the async response
...
this.components(result);
}
}
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #966
[QUESTION] How to load external CSS file into Grapes Editor?
Hey, During my editor = grapesjs.init(), I want to load an external CSS file into the canvas using @import url(...). So when I use my custo...
Issue #1464
Customizing the Component Position
First of all thank you guys for this awesome library, And I have one Clarification that is how do i customize the drop position example if...
Issue #3136
Create one more key in JSON
{ "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "activeOnRender": 0, "open": fal...
Issue #2699
[Question] Can multiple Webpage Builder tabs be opened?
In advance, thank you very much for this powerful tool, I want to comment that I have a website with several html views and access each one...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.