Making Redirection, Copy to Clipboard, & Notifications Easy Using The Layout Page

TLDR; Most of us will have a need to redirect a user or send them a notification in their browser from many of our pages and API's. Instead of inserting the 'browser' and 'notifications' components into numerous pages on your site, place them into your layout page to make them available to all content pages.

When creating your content page, are you adding browser and notification elements when you need to do things like redirection, scroll to a specific location on a page, copy something to the clipboard, or notify the user of a success, failure, or info message from a server connect page? I was, and after my first month of using Wappler, I had at least 10 pages with their own browser and notifications elements.

It then dawned on me that Wappler already had a better solution since the layout page is separate from the content page, is called every time, and is the best place to store these two very reusable and helpful elements. My main layout page looks like this:

Naming these elements with "Main" let's me know they are located in 'main.ejs' on my Node projects. And whenever I select the dynamic data icon, they are available to me to use as long as my content page is using my "main" layout page. In fact, I have two different layout pages and they both have the browser and notifications elements included.

This has helped make sure I always have access to the features these elements provide, encourages me to pass useful information back to the user, and reduces the duplication of code across my content pages.

1 Like

Naming conventions are, for me, one of the most important decisions you can make as a Developer. They roll with you through multiple Projects and save many hours. Likewise with informative comments in your code-base... Especially helpful when you go back to older Projects or are lucky enough to take on well commented Projects from others, such a blessing!