Node newbie question (content/partials/layouts)?

Still a newbie with Node/Content/Partial/Layouts and have some questions…

Where do I include items such as the local storage manager? Currently I have them in the layout page but when I try to clear the cache for example it fails, so included in the content page which works fine… And how about other features such as Lightbox, Data Store, infact all extensions?

What is the best practice here, as for the life of me can’t find any information on the Community? Is a subject also lacking from the documentation as far as I can see…?

Any advice from the experts appreciated!

:smiley:

Edited as per Teo, makes it a bit less confusing.

I have worked quite a bit with Layout -> Content -> Partials and yes it can be a bit of a pain.

From my experience its a bit of a manual task to be honest, as I manually make sure in my Layout Page which holds the <head></head> section that I add all components that are common, such as browser, notify, alert, toasts, as all those are just dummy containers that I will dynamically populate with dynamic data, as well as styling, and the browser component, well I normally only have one at the base of the site which I reuse.

Then I may have a few Content pages, honestly not too many, maybe 4 at most, and in those I am storing vastly different layouts, like one is a blog layout, one is a product page layout, etc.
In these if its a fairly small site you can just stick everything and not really worry about partials.

Personally I am a partial fan, so my content pages are generally just full of links to different partial files, each partial contains its own <serverconnct></serverconnect> that are relevant to the content of the partial.
It can at this point be fairly difficult to access the bindings in the pickers as you will not see most of them from the partial file, so I kind of switch between tabs manually getting whats needed, often creating the element first inside the content page, and then moving it to a partial at the end of that section.

Hope this helps a little.

2 Likes

I believe you are talking about layout pages :slight_smile:
Content pages don't have head tags.

2 Likes

Lol, yes, sorry, haha

1 Like

So am on the right track mix and matching…? Just thought maybe am doing this all wrong and before things get too large and complex will hit the nail on the head early to try and wrap my small brain around it all.

Thank you gentleman, very appreciated indeed.

:slight_smile:

To quote myself hahaha, what is the best suggestion as we use this a lot to cache items such as menus etc?

I ask because when included in the layout and we call to clear the cache it is not cleared...

1 Like

You going to need an answer from a bigger brain than mine for that question, lol, sorry, haven’t done much of that.

1 Like

Can also envisage the same problem with the Data Store… If I remember the app id had to be the same (maybe I am totally wrong), and with content pages etc obviously each is defined by the route by default? Just trying to foresee issues arising, hope this makes sense? I don’t want to run Flows left right and centre, would this be the only alternative route (pardon the pun)? And don’t really want to be calling Local Storage in both the layout and the content pages, as surely this is not correct, and will take up unnecessary resources by repeating requests… Thus lays my confusion and request for the best practice to deploy the above to our application.

Any advice/input with regards to the above @Teodor @George @patrick

The way that I understand that the Node/Express template system works:

When a page is requested, the Layout page (Template) is invoked. The Layout page then inserts the Content page into it.

This means that all components, such as Notification, Browser, Server Connect etc. that are used in multiple Content pages, will need to be placed in the Layout page. If a component is used in one Content page only, you can place that component in the relevant page.

Partials are inserted into the Layout and or Content page as required.

This means that a Partial should be treated as part of the page into which it is inserted, i.e. it makes use of the components of the relevant page.

These are the principles that I base my Node/Express projects on.

As an example, this is my Layout page, where even Modals that are used in multiple pages, have been placed in the Layout page:

This is one of the Content pages where a Server Connect is exclusively used on this page alone.

image

I hope this helps.

2 Likes

Thank you Ben really helpful but am still at a loss with the Data Store and Local Storage components as neither function correctly when contained within the Layout page, Server Actions work fine as do other components. I believe this must be something associated with either the app id or something else I do not quite understand, this is where my issue is. In what manner should these be included in to the Application is not clear to me, yet…?

Getting somewhere, if I rename the app id to the layout page app id it seems to work, so why are the content pages not inherently adopting this app id, and instead using the page/route name? Possible bug, or by design? Are there any issues with me replacing the app id with that of the layout page app id? Is there a reason the app id in the content pages has to be the same as the route/page name?

Have a look at https://docsdev.wappler.io/guides/creating-a-shopping-cart-with-the-data-store-component?id=checkout-page-overview

where you will see

In order to be able to use the Data Store data on another page, let’s say a checkout page there are two requirements you need to follow:

  1. The App ID must be the same as on the page where you defined the Data Store:
  2. The Data Store component ID must be the same as the one used for the shopping cart:

How do you bind data to the partial if you can’t see it in the picker?

Have to do it in code view, but it easier to just build your stuff inside the content page and then move it to a partial afterwards.

I’ve tried using the template variables to pass data to the partial but it was a headache so I just moved everything inside the content page.

Can you share an image showing how you do that? The data binding in code view…

To try understand what you are trying to do, rather send your code and I will try tell you how to move it, sorry I am on my phone right now so can not get my code for a few hours still, but if you show me what you got I can try guide you, or tell you if what you are attempting is going to work or not.

Thanks again @ben, yes am aware of this as mentioned above (and from using the Components many times in other Projects), when I renamed the app id's all was fine. What I did not know was would it be OK to rename the Content Pages in Node from their adopted page/route names. In the end I just thought 'sod it' and tried, no adverse issues resulted. Then submitted a bug report, in hindsight should probably have been a feature request, to default the Content Page app id's to that of the Layout Page, and all resolved. As I said Node and Template page newbie here so catching up on a lot right now. All working as it should be.

Again thanks for your input much appreciated.

1 Like

Am having flashbacks of building Frame based pages!

:smiley:

For those that don’t remember Frame layouts:
https://www.w3.org/TR/html4/present/frames.html

1 Like

Sorry can not see the link on my 200mbps fibre, will pull out my 14.4kbps US Robotics dial up modem, haha.
Just kidding, but damn you have been coding a while, haven't you.

1 Like

Started creating basic pages using a text editor (in FreeBSD) around the HTML 2 - 3 update. Remember my HTML Reference book was the size of the Bible! :slight_smile:

Edit, actually before that used to create menu driven systems for VAX clients on DEC Mates hahaha... Yay green text!

1 Like