I want to create a reusable block that uses a template (say another block) that could be repeated within that block.
For instance, say I want to create a dropdown for which every single custom list item would have a specific rendering with an icon, some text, maybe even clickable links.
With react, I would use props.children to do that. With Angular, I would use content projection a.k.a. transclusion, or I'd pass a ng-template as an input.
For some reason, placeholders cannot be repeated in a block and as a result, wouldn't work there. Any suggestions?
Question: what's stopping you from using a list of blocks that receive the content as an input parameter? Of course that would mean somewhat limited functionality in terms of what you could put in the block itself...
A different option could be having a block that receives the data as input parameter as well as the "block type", so you would only render that block type. Of course you have to handle this with IF statements and whatnot...
Am I over simplifying your scenario?
Cheers!
Passing a "block type" might be the first step in the right direction. How would you do that though? I see how a string can be passed but how would you instantiate an actual block out of it?
Hi @Alain Chautard & @Armando Gomes,
Late for the party! But here goes my 2cents! :)
@Alain Chautard I understand from where you come, and what you're aiming to do.
OutSystems being a visual language, you need to create things with a slightly different mindset - due both to the nature and limitations of it.
Your use case is extremely common - and it's the 101, of developing in OutSystems.
To make easy to explain, I'll use the following terms:- creator: the person that is creating an reusable block - you in this case :)- developer: the person(s) that will be using this block in his(their) application(s) - let's say me and Armando- user: the person that will be using the application that actually uses the block created by the creator and instantiated by the developer.
As @Armando Gomes already mentioned, we can imagine 2 ways to create this pattern:
I'm sorry, for writing so much, and not doing any visual asset to help explain.
Let me know, your thoughts,Cheers,RG
p.s. - welcome to OutSystems community!
Thanks @Ruben Goncalves. Option #1 is the closest to what I was thinking about, but it leaves the customization part out of it (or CSS only for the developer).
The idea would be that the block creator opens some of the HTML for its child elements to be customizable, and a placeholder might seem to be the closest to what I'm talking about, but as far as I know, the parent block can't really interact with that content or make it dynamic.
For instance, Angular Material has that possibility to customize a cell in a data table by using any HTML we want as well as custom expressions to render dynamic data in it: https://material.angular.io/components/table/overview#2-define-the-column-templates
That's really what I was hoping to be able to do.