I used to have reusable components as a header and a footer. Now, I am using a layout. There are navigation links in the header that change the visibility if a user is logged in or not.
With reusable components, I used a simple logic applied “on mounted” to check the current user and change the visibility of navigation links based on that. This worked because the reusable components loaded with each page change.
With layouts, I understand that the layout does not reload on the page reload only the page render area is reloaded. And so “on mounted” happens only once.
As I mentioned, in my use case, I want the content of the layout to change based on logic around users. Is there a way to force a reload of the layout or inform the page that the layout content needs to change? Or do I have to use a different section instead of “on mounted”?
There is no need to reload a layout. If the components in a layout use the Layout Data data model, they will automatically react to the model changes the same way data binding works in pages. I recommend checking out the following chapter in the documentation, specifically the practical example documented in there:
https://backendless.com/docs/uibuilder/ui_logic_in_layouts.html
Regards,
Mark
I see. Good article, explained what I was looking for, thank you. I very much liked the interactive “Arcade” element in there.
I have noticed that if the data-binding for the Visibility Logic is established, the default behaviour is to hide that element. Is that correct and is it expected? It happened to me when I was setting this up, I assigned the visibility logic in my layout to more elements and did not use them in “On Before Page Enter”. Then, despite not specifying that those elements should be hidden, they did not show up.
Yes, this is the expected behavior. The reason for this is that the default value assigned to the data-bindable property is going to be null or undefined, which evaluates to false.
Regards,
Mark
1 Like