If you are familiar with the Modeler and creating page templates, then you are probably acquainted with components such as Alert, Panel, Conditional, and others. To create a similar widget, we need an additional feature called Placeholders. This feature allows you to reserve a section in your widget for content that you can add in the Template Editor within the Modeler. Let's create a simplified Alert component to explain the concept of placeholders.
Create a new widget called "Information Card."
Select the Placeholders tab.
Click on "New placeholder."
Name it "Contents."
You can provide a label and a description if you wish; these will be displayed in the Template Editor.
Copy and paste the following script:
To keep this chapter simple, we are reusing the Alert Bootstrap classes. Other than that, there is one new statement here called render. As the name implies, this statement will render the contents of the @Contents placeholder. And that's it!
Now, place this widget on a template and notice that there is an additional container that was not previously shown in the other widgets we created. Try dragging some components, adding some text, or including other widgets in this container.
As you can see, placeholders are very easy to implement and incredibly powerful.