Reloading a Server Connect on SPA Include

[brad]

I am beginning to regret using SPA to build a dashboard. Here is the situation I need to find a solution for.

I have a page with a list/search of clients. On that page I have a link to an add new client page. Works fine. Now when the new client form is submitted I redirect back to the list. This works as well.

However the new client just added is not shown in the list.

How can I refresh the data on page load? The only thing I can think of is to use a scheduler to refresh every few seconds. Which of course is not ideal. I can see a dashboard full of schedulers to keep data current.

[Hyperbytes]

I confess I am not a big SPA fan, routing is great and i like it for SEO reasons, for me gives a better chance to add key terms but I thing many SPA sites are built that way because it is the current trend (so offence meant to anyone). It has too many quirks which to me outweigh any benefits unless an SPA is really essential

[scott]

@brad,

In your form, on success, add the query load to the success.

[brad]

That’s how I would normally do it Scott, but in the case of SPA sites the queries aren’t on the same page as the form therefore not available to load on success.

[scott]

If the query is on the the SPA index page, you can manually add it in on the SPA child page. That is an known issue where it isn’t available in the data picker as of yet.

Here’s a link where I discussed how I have it set up.

How to conditionally show content if user is logged in

@niall_obrien, What I did was create a user details query to retrieve the details of the logged in user. I then put in on my SPA index page, so it is called when the page is loaded. I then referred to it on the SPA child pages by adding it to the show/hide dynamic attributes or server connect data displayed on the page. It is important to note that with SPAs, any queries on the index page are not currently available in the data picker, so you would need to manually add it in. So for example…

So in your case, what I would do is a sample query on the SPA child page and have it load on success. I would then go into the code view and paste in the query code from the SPA index page.

[niall_obrien]

I am beginning to regret using SPA to build a dashboard.

I feel your pain, it really shouldn’t be this difficult.

[niall_obrien]

SEO really doesn’t come into play when building an app behind a paywall or login. So in those instances, any perceived performance improvements are definitely worth it. Unfortunately it definitely does increase the learning curve for a new Wappler user such as myself. I’ve used this technique in an Express app many times (via Simple-Pjax), and tbh, the only gotya I had there was that the DOMContentLoaded event only gets fired on the initial page load, so you’d instead listen for Simple-Pjax specific events to execute your client-side JavaScript (before and after page transition events).

If I’m having this much difficulty really getting to grips with Wappler and its intricacies, then I can only imagine what someone with very little web dev experience feels like.

[George]

Brad,

Refreshing a Server Connect data is actually not any different on SPA pages than on regular pages.

After your server connect form submit on the complete event you just call the server connect action “load” to refresh its data.

I think @Hyperbytes even converted that on its basic CRUD webinars

[George]

That’s how I would normally do it Scott, but in the case of SPA sites the queries aren’t on the same page as the form therefore not available to load on success.

If your server connect query is on the main page, you can refresh it just as well.

The data picker just don’t show the components and data from the main page to pick from but it is there. Just enter it manually like sc_name.load()

We will be improving the data picker to show main page data soon.

[George]

I am beginning to regret using SPA to build a dashboard. Here is the situation I need to find a solution for.

SPA has a huge advantage in user experience and performance, specially on user dashboards as those can take fully advantage of the partial reloads of the content views.

But as any new technology and paradigm, it takes time to learn it and get it right.

Also for us the Wappler makers, it takes a bit to perfection it’s integration in Wappler.

But with the valuable feedback we receive here, we should be able to quickly improve it and make its workflow perfectly clear just as the regular pages workflow

[niall_obrien]

Do you think that utilising Simple-Pjax would make for a far easier integration instead? It wouldn’t require any alterations to an existing Wappler app (for the most part) to switch to a SPA in this context, which is its main benefit (easy to drop into an existing site).

[George]

Actually the App Connect SPA implementation is pretty similar what Pjax does.

[niall_obrien]

Sure, I can see that it fetches the child pages via XHR, but the setup involved within Wappler for this functionality is far from ideal. It’s also not so easy to go back to a regular page from a SPA page due to the markup added to the page etc. Utilising Simple-Pjax requires no changes to a page.

[brad]

After your server connect form submit on the complete event you just call the server connect action “load” to refresh its data.

How can you do that when the server connect data isn’t on the same sub page?

[brad]

SPA has a huge advantage in user experience and performance, specially on user dashboards as those can take fully advantage of the partial reloads of the content views.

But as any new technology and paradigm, it takes time to learn it and get it right.

I love working with the SPA method. I do see the advantages. I’m just finding a few limitations when using live real time data.

[Audioboy]

I apologize upfront for asking for more clarification here but I am still having trouble finding a solution for my SPA based site.

I have a main page index page with a panel section. I have a panel that is loaded that contains a project list. Works great. It has a button that says “add new project”… that swaps in another panel in the same location on the index page to provide a create new project form. A user creates the project, hits submit and I take them back to the index page with the project list panel. That all works. So, far I think I am just like the examples above. It all works except the project list is not updated.

So, I understand I can reference the server connect object even if it does not show in the data picker but can I do that if the get_proj_list.load() is on another SPA panel and not the main page? I tried doing it in the form submit success event. Perhaps I did not get the syntax correct?

I am sure I am not understanding something so any help is appreciated.

[nshkrsh]

add the same server connect to the other sub page as well.
we’ve used this approach - it works.

if you can explain your problem in details, maybe can help you better.

[nshkrsh]

on index: a ServerConnect (SC) is there called sc1 with ServerAction(SA) sa1.
on sub page 1: there is a SC called sc2 with SA called sa2.
on sub page 2: to load sc1 on this page just call sc1.load(). if you want to load sc2 on this page, better to add a SC called sc3 on this page with SA sa2.

[nshkrsh]

btw, we love SPA.
sure it has its quirks - but UX is incredibly smooth.

[Audioboy]

mshkrsh, I appreciate the suggestions. Ok, to add some more detail… My main SPA page is called index. It has a single panel area below the nav menubar. I click on the “Projects” menu item which gets my “project list” panel to load and show the list of projects. Let’s call that Panel_1. On that list of projects there is a button to "create a new project. When clicked a new panel, we will call that Panel_2 into the location of Panel_1 on the Index page. So far so good. Panel_2 contains a form to create a new project. Once complete, a submit action creates the project in the database etc. It then uses a browser.goto to the route that loads Panel_1 back into the index page. So, user now sees the list of projects again. All works well except the list does not contain the newly created project. It has the results it had when the panel_first loaded.

The SC that gets the list of projects is on the panel_1 page and not the index page.

So, what is the best was to navigate back from my create new project page and have an updated list of projects including the new one? I think that is the original question in this thread so my problem seems similar if not the same but I have tried the solution ideas presented with no luck. I am sure I am not understanding something basic because these type of work flows would be typical in an SPA app.