For this showcase we used the Routing Options available in Wappler to create a SPA (Single Page App) with two views. On the home page we show the travel destinations in a dynamic list and when you click on any of the Details buttons the details view is loaded showing more information about the selected destination. You can click the “Back” button in the details view to return back to the list view.
All of this without reloading the page!
Very interesting showcase, could you add the template here so we can use it ourselves?
@Teodor is that possible? Maybe that’s a good idea to do for every showcase, it would greatly improve my learning
Hi Nevil,
The showcase is made following the docs here: https://docs.wappler.io/t/creating-single-page-apps-spa/6583
Just follow what is explained there 
In the next versions we will add an option to export your projects and import them, so it will be easier to share the showcases with others here.
Hi Teodor,
Just a couple of remarks regarding the showcase
Food for thought.
Well Ben, this is a single page app.
Single page apps have one main template (one HTML file) and only the views inside it are changing. These views are not full pages with own head tags and that’s the whole idea of SPAs.
It’s the main page having all the meta tags - so they are the same for all views.
As for the scrolling - nice catch I will update the showcase to auto scroll up when the view changes.
I was hoping to use the system as a template rather than a pure single page app. It would beat any other template system available.
How easy, create the template and invite the relevant content when the URL changes. Oh well, wishful thinking.
Well it works exactly like this:
Your main page is the template page, and the views are the different content of the template.
In your site you can have as many “main pages” with their own views as you need.
Of course this approach is not suitable for all of the sites you are building
But I find it useful for situations like:
This is a great new feature and I am about about to start using it, but I have a question and would like your opinion.
Is SPA suited to CRUD (Create, Read, Update, Delete)? Or put it another way - which is the best way to integrate CRUD pages into a website produced using Wappler?
I have lots and lots of CRUD pages to do for a company administration site and want to plan for the most efficient way of doing things.
Maybe this should be a separate post?
I would say you’re better off using workflow No. 2 or workflow No. 3 than a dedicated SPA.
If your objective is to make a smoother experience for the person who is charged with updating a website then option No. 2 but if youre not bothered too much about user experience/performance, dont mind page reloads/redirects, option No 3. I don’t paricularly think this is a deal breaker myself, it’s a matter of opinion.
I don’t see the real point in using a 'dedicated SPA approach when you need to deal with server data which needs to be called and sent to the server frequently as usually you are working with some kind of repeat data/region/details area/page and passing data back and forth to the server. The objective of an SPA is to negate that ‘cumbersome’ workflow and in my opinion its best suited for ‘static’ pages which need to be loaded into a ‘fixed templated structure’ or though you could possibly make the ‘spa view/routing’ dynamic. I havent really given that much thought inside Wappler (which I don’t use) or outside Wappler in Vue (which I do use) but the front-end frameworks and workflows are similar.
Both frameworks already have efficient methods of passing data to a data-details-view for CRUD operations, without the necessity to deploy an SPA.
This little bit of Javascript will take the InnerHTML of the nav-item and use it for the title. It obviously is not perfect but it covers what I need.
$('.nav-item').click(function() {
var active_title = event.target || event.srcElement;
document.title = 'Admin - ' + active_title.innerHTML;
});Thank you for that. I had thought of doing something similar, but decided to go for a PHP solution instead as in
$url = “//{$_SERVER[‘HTTP_HOST’]}{$_SERVER[‘REQUEST_URI’]}”;
$link = $_SERVER[‘REQUEST_URI’];
switch (true) {
case stristr($link, “who-we-are”):
$title = ‘A Mornington Peninsula based web solutions company’;
$description = “Pleysier Web Solutions strives to develop quality web sites, using the latest available visual and Search Engine Optimisation techniques at an affordable price.”;
break;
case stristr($link, “what-we-do”):
$title = ‘Specialised in bespoke web solutions’;
$description = “Ultimately, the goal of any Web page is communication. You are trying to communicate through words, pictures, and layout your site or company’s goals.”;
break;
case stristr($link, “get-in-touch”):
$title = ‘Your Web Solutions on the Mornington Peninsula’;
$description = “We’d love to hear from you. You can either reach out to us as a whole and one of our awesome team members will get back to you, or if you have a specific question reach out to one of our staff. We love getting email all day every day.”;
break;
default:
$title = “Welcome to Pleysier Web Solutions”;
$description = “With the vast knowledge of web techniques that Pleysier Web Solutions has acquired over two decades of web design, we are able to meet the most demanding needs without the corporate price tag.”;
}
I can use $title and $description in various places like:
<meta property="og:url" content="<?php echo $url; ?>"> <meta property="og:type" content="website"> <meta property="og:title" content="<?php echo $title ?>"> <meta property="og:description" content="<?php echo $description ?>">
As Os (@the_coder) has said, this approach is ideal for small sites with static pages. It becomes a pain when the likes of a recaptcha is used.
Oh well, still looking out for the ultimate template system. 
We need a tutorial on this. I am building my first SPA site and loving it but need to be able to do this as well.
we use scroll.goto(0) just before browser.goto(’./xyz’) to scroll the page back up.