I'm coming from modern High-Code JS Frameworks like React/Next etc. and I'm used to writing HTML Code inside my components including any variables (arguments/input parameters) inside it.I've noticed that this is, atleast to my knowledge, not possible in Outsystems which blows my mind.
How do you avoid adding unnessecary containers when you want to add variable values inside your HTML, i.E. when working with block?
To visiualize this a little bit better:
I want to create a reusable block that simply displays a text with different input parameters like:
My name is {NameParameter}. I'm coming from {CountryParameter}. How can I achieve this? Do i really have to use another container for every single parameter like this:
HTML/Label Element + Expression + HTML Element + Expression. This would result in a crazy amount of overhead & a mess in styling and line separation?
Hi @Nicolas Körner
If you just need simple text like this:
My name is {NameParameter}. I'm coming from {CountryParameter}
You can write an action and set it as Function.
Then call it in your expression like below:
Hi @Nicolas Körner ,
try not to implement concepts of your old stack in OutSystems to get something done. There is no concept of component in OutSystems. We have actions/functions, widgets and can make blocks as the basic elements to create the UI with.
So for someone who is used to different concepts, this means taking a step back away from the architecture/implementation you are used to.
Can you explain why you are talking about 'crazy amount of overhead and a mess in styling and line separation'. what exactly do you mean?
The platform does create some extra elements like divs, but that's a tradeoff, and only is a problem when it is, not before.
Dorine
I've assumed that blocks are a similiar concept like components in Angular/Vue/React.
Besides that, is the above way the best practice to incorporate variable values inside html?As mentioned in this example:
My name is {NameParameter}. I'm coming from {CountryParameter}.
Assuming I have a local variables or input parameters called NameParameter or CountryParameter.
The overhead im talking about is similiar what you're facing when using pagebuilders where you end up with a lot of containers or divs to simply incorporate variables into a dynamic HTML text.
Another example would be if I pull data from an aggregate with users and country and i want to display the following text:
I am {AggregateUsername} and I'm from {AggregateUserCountry}.Best Regards,Nicolas
As an OutSystems developer, you rarely think of it in terms of HTML, you just work with widgets and you let the platform take care of what it needs to do in terms of HTML, and occasionally, that will lead to HTML that you as a high coder would have done differently. If you want to be happy as a low code developer, you'll have to accept that.
the simplest way to incorporate variables in a piece of text you would like to show, is just using an expression widget. This is, if you don't need it to be reusable.
You can use classes on your expression to design it as desired.
If you are only interested in the text being reusable, then that would be with a client function as mentioned by @Kiet Phan, and again use an expression widget to add it to the UI.
If you want to make both the construction of the text and the style reusable, you'd go for a block holding the expression, and any styling you want to apply to it, (preferably with attaching a class(es) to the expression).
In case of an expression, that results in only a span, in case of a block, you'll end up with some overhead, it creates both a div and a span
Oh, just to make sure : reusable doesn't mean, on all items of an aggregate coming back, you don't need reusable things for that, you can just define a table or list, and use the expression in there, it will work for all rows of the aggregate
and just another remark : you rarerly make a block for this simple type of example, it would typically be a bit more involved to warrant a whole block being made and maintained.