SPA Tutorial Needed. Data Detail Views

#1

We really need a tutorial on how this showcase was done using data detail in a SPA. I’m really stuck on this. Anyone done a data detail in a SPA?

#2

Well Brad,
There is nothing too special about this showcase. Which part is not clear for you?

1 Like
#3

How to show a detail page in a SPA. For example I have a list of press releases in a view and I want to show the full press release in a view. Assumingly with a URL Parameter.

1 Like
#4

Well Brad, you just define your views as per
the tutorial and setup the url params as needed.
Could you explain which part exactly is not clear for you?

#5

The routing tutorial is for having the detail page on a second page. I don’t want to have a second page, I’d like to do the entire site as a SPA. What is the differences in using it as a SPA?

#6

Brad, single page apps are made of one main page and different views (different subpages) included in it.

What do you mean by:

#7

Hi Brad,

I successfully created a site with data detail views.

image

image

image

Link inside Listview to call Detailview:

./aktuelles/{{AktivitaetBez.slugify()}}/{{AktivitaetNr}}

Is this what you are looking for?

That is how the code view looks like in the index file:

<div class="main col-md-6">
<dmx-serverconnect id="AktuellesAllgemein" url="../../../dmxConnect/api/Kundenportal/Content/aktuelles_allgemein.php" cache="sessionCache" ttl="3600"></dmx-serverconnect>
<div is="dmx-route" path="/" url="../../contentpages/portal/_aktuelles_uebersicht.php" id="AktuellesUebersicht" exact="true"></div>
<div is="dmx-route" id="AktuellesDetail" url="../../contentpages/portal/_aktuelles_detail.php" path="/aktuelles/:slug/:aid" exact="true"></div>
</div>
1 Like
#8

I am aware that SPA is a single main page with different views. That is exactly what I am trying to accomplish. All my static pages and list pages work fine. Just can’t figure out how to get a detail view.

The routing tutorials are two pages. One for list and one for details.

#9

Thanks Marcel, I’ll see if I can figure it out. :slight_smile:

#10

What do you mean? Of course there are TWO views - one for list and one for details… That’s how single page apps work! You include both views in one main page.

I really cannot understand what exactly are you asking about.

#11

I know it would be two views. I have a main page now with about 15 views and it all works great. What I can’t do is link from a list view to a detail view.

That’s ok, I am probably just not smart enough to do it so will probably give up on this project being a true SPA. i’ll go through the tutorial again. Thanks for your time.

#12

Did you try out, how I solved it?

It is important to begin the link with ./ and not to use single quotes.

#13

This link might help you too.

image

You have to put this inside the Detailview.

#14

Thanks Marcel, I appreciate your time. I did see that thread already. George’s final comment on it even says they should update the docs. :wink:

1 Like
#15

The links are generated automatically when using the routes picker :slight_smile:

It’s the same as passing an ID from one page to another. Just pass your ID to the details view, as explained in the topic Marcel has pointed to.