This is our solution to give total freedom to you to create your own custom blocks into the Hero.
HTML/JS/CSS
This mode uses any code introduced to render it and show it in its corresponding Hero block.
If you add raw text in the javascript field, this text will be shown in the public view, be very careful in order to avoid this.
Finally, visit this page to have an example of a Social media widget with this HTML/JS/CSS custom widget.
JSON
This mode uses the Adaptive cards’ format to show the content.
The Adaptive cards format in IE with dynamic data will not be supported.
The only two mandatory fields are the source data URL and the template JSON. The first is the endpoint from where the data is retrieved. And the second is the layout that the data will follow.
Finally, visit this page to have an example of a Stock widget with this JSON custom widget.
Power Automate
This mode uses the Microsoft Flow Power Automate to populate the content of this block.
This mode also uses the Adaptive cards’ format to show the content.
To do it the Block Id field has an identifier that univocally identifies this block and a Copy button, after clicking on it, the ID will be stored in the clipboard ready to be pasted to set up the flow in Power Automate.
After saving the block and having copied the ID, the admin must go to Power Automate to use the copied ID to set up the flow. To have more details go to the page where we explain this process.
After saving the Power Automate block, if the flow hasn’t been executed no data/result will be shown in the preview. And if no Power Automate flow related to that block ID is created, in the public view, an empty state will appear.
The PowerAutomate Block works by creating a Block using an API Endpoint. The standard idea is to use Microsoft Flow Power Automate to create a Block by configuring a workflow that will perform an Appspace Intranet Action and this can only be done in a cloud environment, but at the end, this action is calling an API endpoint that will add content to that Block. So a customer in WSP or Add-ins on premise can use that endpoint in an external way just by creating an app or a custom development and that it allows creating blocks dynamically.
Read-only users
If you need to avoid the read-only users to interact with the custom widget block, you have to do it manually. We don’t provide a way to do it out-of-the-box. So be careful because the read-only users will be able to interact with your widgets.
Responsive
There is a parent node that is ours and has a width and height that you can use to get responsive behavior. If you don’t take advantage of it, the custom widget won’t be responsive. We encourage you again to read our styling guide to have more details about responsiveness.