CODEWITHSUNDEEP
dotnetnuke2sxc
Aaron - Wolf X Machina
Aaron - Wolf X Machina

Reputation: 643

How can I create a 2sxc app that has a listing and details that open in a modal?

I want to create a 2sxc app that has a listing of items. When a user clicks on an item, it should open the details view in a modal window.

However, I don't want to simply load all items into the page and have a JS open the modal. Ideally, I would want the modal to load the content only when it's called. Also, ideally the URL would still in place similar to how there's a listing and details templates in an app.

Is this possible?

Upvotes: 0

Views: 63

Answers (1)

iJungleBoy
iJungleBoy

Reputation: 5638

Yes, this can be done :)

It basically needs 3, optionally 5 steps

  1. Open a DNN page without a layout
  2. (optional) make sure only your module will be on the popup using mid=... parameter
  3. Make sure you add the id/name-id/guid of the details in the link such as post=...
  4. Create the razor view which shows the details, ensure it appears when the parameter is added
  5. (optional) Create different urls for google / user so user sees the popup, google indexes a real page with the details view

1. Empty Skin / Layout

The trick is to open the page using the DNN parameter to either switch to the layout-free skin (print), or to another custom skin. This allows you to start with an "empty" page without stuff around it. Either use popUp=true in the url (the Up must have an upper case U) or a skin parameter to choose another skin

2. - 4 MID, url-parameter, name in url to select view

This MID is common - if you have mid=... DNN will not load any other modules on the page.

Same with the named url parameter for the details-id and view switching, so I won't document this in detail.

5. Different details for Google vs. Interactive

In case you want google to index the details view, that would probably want the indexed page to have a layout. So create a link to the details without the special popup, and on-click only change it to open the link with the popup feature.

Upvotes: 1

Related Questions