Hide

YetaWF Documentation

Display
Print

Unified Page Sets

Unified Page Sets are used to combine multiple individual pages into one page (Single Page Application) served to the user. Only the modules in designated panes are combined into the final page.

There are 5 different styles of Unified Page Sets. Each with its own particular benefits, which you can apply to a group of related pages. In all cases, when navigating within a Unified Page Set, the site is responds more quickly.

ModeDescription
Same Skin Dynamic Content(Recommended) Combines all pages that use the same skin into a Unified Page Set. If your site uses just one skin, all pages can participate in a Unified Page Set. Page content only (not the entire page) is dynamically replaced when navigating between pages (one Ajax server request for pane content). This is the easiest and most powerful way to create a "Single Page Site" as you create and design each page individually as it will appear to the end-user. This can be used with sites that have thousands of pages, as long as they all use the same skin.
It is recommended to use this mode for any site that uses one skin for most of its pages as it will significantly improve response time for each page.
Even though all pages use the same skin, you can still define page specific Css classes (defined in Page Settings, Skin Tab, Css Class field) which can be used to vary the look of individual pages, even significantly.
Dynamic ContentCombines all pages in a page list into a Unified Page Set. All pages should use the same skin. This mode works just like the "Same Skin Dynamic Content" except that you provide a list of all pages that are part of the Unified Page Set.
Hide OthersCombines all pages in a page list into a Unified Page Set. All pages should use the same skin. When any of the pages in the page list is requested by the end-user, one page is rendered but with the content of all other pages in the page list included. Content for other pages is hidden until the user navigates to another page within the page list, at which time the content is swapped. No server requests take place in this mode as all content is preloaded. This can be used for small sites with few pages (or small Unified Page Sets) so navigation between related pages requires no server access.
Show All ContentCombines all pages in a page list into a Unified Page Set. All pages should use the same skin. When any of the pages in the page list is requested by the end-user, one page is rendered with all the content of all other pages in the page list included and visible, in the order they appear in the page list. When the user navigates to another page within the page list, the appropriate content is scrolled into view. No server requests take place in this mode as all content is preloaded. This can be used for small sites with few pages (or small Unified Page Sets) so navigation between related pages requires no server access.
NoneThis mode is used to disable a Unified Page Set. Any pages in the page list are no longer processed as a Unified Page Set. This can be used to (temporarily) disable the entire set or to specifically exclude certain pages from participating in Unified Page processing.

Unified Page Sets can be defined using Admin > Unified Page Sets (standard YetaWF site). It is possible to define multiple Unified Page Sets, typically by combining logically related pages which the user is likely to visit at the same time.

A Unified Page Set is rendered by combining the actually requested Url with all other pages within the Unified Page Set. Only modules within designated panes are merged into to requested page. Typically, header, footer panes etc. are not merged. For this reason all pages within a Unified Page Set should use the same skin (although this is not enforced, except for the "Same Skin Dynamic Content" mode).

A page can only be included in one Unified Page Set.

The maximum number of pages within a Unified Page Set is not limited, but is dictated by the amount of processing required for each page. The "Same Skin Dynamic Content" and "Dynamic Content" modes only process the initially requested Url and incrementally add new content for new page requests so initial processing is minimal. Other modes render all page content during initial page load.

Single Page Sites (really Unified Page Sets) work for anonymous and authenticated users alike.

Pages within a Unified Page Set can also be defined as Static Pages (for anonymous users). This means, even if all your pages of your site are part of a Unified Page Set, you can still define the Home page (for example) as a Static Page. This has the advantage that anonymous users arriving at your site will get a fast page load for the Home page. Once they navigate on your site, the pages will be rendered using content replacement (defined by your Unified Page Set).

Navigating from a Static Page (which is part of the Unified Page Set) to another page in the same set will result in simple content replacement (not a page reload). Navigating back to a static page (the Home page in this example) from a page in the same Unified Page Set will result in content replacement, not a page reload. In other words, a Static Page is only rendered as fully Static Page when it is initially requested. Content replacement is generally faster than a Static Page load, as all globally used Javascript (like jQuery, Kendo UI, etc.) have already been fully initialized.

Creating a Single Page Site

The easiest way to create a true Single Page Site is to create a site where all pages use the same skin. Even though all pages use the same skin, you can still define page specific Css classes (defined in Page Settings, Skin Tab, Css Class field) which can be used to vary the look of individual pages, even significantly.

Then create a Unified Page Set for the Home page as the Master Page and select the "Same Skin Dynamic Content" mode (using Admin > Unified Page Sets, standard YetaWF site). That should take all of 30 seconds. A freshly installed default YetaWF site already has this defined for you.

Done! (Seriously - Nothing else)

The default site created when you install YetaWF uses a Unified Page Set for all pages using the "Same Skin Dynamic Content" mode.

SEO

Single Page Sites created using Unified Page Sets don't have any of the Search Engine Optimization (SEO) disadvantages traditionally associated with Single Page Sites. Each link (<a> tags) within a page rendered as part of a Unified Page Set is a fully functional Url, backed by a real page, so bots that visit a YetaWF site can access the Url. Only end-users that click on the link will actually use the faster dynamic page content offered by Unified Page Sets. Bots will simply access the Url and will receive a full page. This means that pages are indexed as if the site were a regular (non-Single Page) site.

Analytics

Single Page Sites created using Unified Page Sets don't have any of the Analytics disadvantages traditionally associated with Single Page Sites. When using the "Same Skin Dynamic Content" and "Dynamic Content" modes for a Unified Page Set, analytics code will be injected when the user navigates between page content. This means that each end-user click, navigating to another Url with the Unified Page Set can be tracked by analytics.

Analytics (Javascript) code for page requests can be defined using Admin > Settings > Site Settings, Addons tab, Analytics and Analytics (Content) field. The Analytics field defines the Javascript that is injected when a full page is requested. The Analytics (Content) field defines the Javascript that is injected when the user navigates between pages of a Unified Page Set, which only creates an Ajax request that is normally not tracked.

The "Same Skin Dynamic Content" and "Dynamic Content" modes track all navigation between pages in a Unified Page Set. The modes "Hide Others" and "Show All Content" do not track navigation between pages as only the initial page request issues a server/Ajax request. Only the initially requested page is tracked.

Google Analytics

Below is an example of the Google Analytics Javascript code that is used to track all requests in a YetaWF site (see Admin > Settings > Site Settings, Addons tab), including navigation between page content.

The "Analytics" field should be set to the exact Javascript as provided by Google, including <script> tags.

The "Analytics (Content)" field should be set to Javascript code (without <script> tags) that is executed whenever navigation within a Unified Page Set occurs. For Google Analytics this should read:

ga('send', 'pageview', '<<Url>>')

The variable <<Url>> will be replaced with the actual Url being accessed.

Google Analytics

Technical Details

Module References

Any modules referenced by sites, pages or modules will work as expected with the "Same Skin Dynamic Content" and "Dynamic Content" modes. As each page's content is rendered, the page's matching module references are added/removed as needed.

For other modes, the referenced modules must be defined by the Master Page of the Unified Page Set.

Page Classes

Any page specific Css classes (defined in Page Settings, Skin Tab, Css Class field) are honored for each page rendered with the "Same Skin Dynamic Content" and "Dynamic Content" modes.

For other modes, the page specific Css classes must be defined by the Master Page of the Unified Page Set.

Popups

Popup windows can participate in a Unified Page Set (if enabled) with the "Same Skin Dynamic Content" and "Dynamic Content" modes. This renders popup windows quite a bit faster as only their contents are added to the popup (within a <div>).

In all other modes, popups are rendered as full pages (within the popup window) in an <iframe>.

Depending on your site requirements, popups can be disabled entirely so they are rendered as pages (always with Unified Page Set handling) using Admin > Settings > Site Settings, Site Tab, Allow Popups field (standard YetaWF site).

Designated Panes

Any pane can be designated as allowing merged content in a Unified Page Set. The following is a sample skin that allows content merging for the Main pane, PaneSetL2_RightPane, PaneSetL2_MainPane, etc. by using the Unified parameter of the RenderPane method, set to true. In a Unified Page Set using this skin, all modules from other pages in the Main pane, PaneSetL2_RightPane, PaneSetL2_MainPane, etc. would be merge into the page.

All skins included with YetaWF set Unified to true for most panes, except for header and footer panes.

    <!-- Panes -->
    <div class="container maincontainer">
        <div class="row">
            @RenderPane("", "col-md-12 MainPane AnyPane", Unified: true)
        </div>
        <div class="row">
            @RenderPane("PaneSetL2_RightPane", "col-md-4 PaneSetL2_MainPane AnyPane", Unified: true)
            @RenderPane("PaneSetL2_MainPane", "col-md-8 PaneSetL2_LeftPane AnyPane", Unified: true)
        </div>
        <div class="row">
            @RenderPane("PaneSet3_LeftPane", "col-md-3 PaneSet3_LeftPane AnyPane", Unified: true)
            @RenderPane("PaneSet3_MainPane", "col-md-6 PaneSet3_MainPane AnyPane", Unified: true)
            @RenderPane("PaneSet3_RightPane", "col-md-3 PaneSet3_RightPane AnyPane", Unified: true)
        </div>
        <div class="row">
            @RenderPane("PaneSetR2_MainPane", "col-md-8 PaneSetR2_MainPane AnyPane", Unified: true)
            @RenderPane("PaneSetR2_RightPane", "col-md-4 PaneSetR2_RightPane AnyPane", Unified: true)
        </div>
    </div> <!-- /container -->

Troubleshooting

Here are some of the reasons why navigating between Urls in a Unified Page Set may still render the full page, instead of just rendering the content.

http:// vs. https://

When navigating from a page with http:// to a page with https://, the page will always be rendered in full. For sites with Unified Page Sets it is recommended to use one mode only. You can force a specific mode using Admin > Settings > Site Settings, Urls tab, Enforce Security field.

Login/Logoff

When user authentication occurs, the page will always be rendered in full.

Site Edit Mode

Pages are always rendered in full in Site Edit Mode.

<a> Tags

Only <a> links that have the Css class "yaction-link" participate in a Unified Page Set. Otherwise, links without this class will simply load the full page. Links generated by YetaWF all have this class. If you create modules or module content (YetaWF.Text module) that use <a> tags, the class "yaction-link" must be added unless the link points to another site or to a local page which is not part of the Unified Page Set.

Popups

Popup windows only participate in a Unified Page Set (if enabled) and only with the "Same Skin Dynamic Content" and "Dynamic Content" modes.

Master Page Removed

The Master Page (see Admin > Unified Page Sets) has been removed. Without available Master Page, full pages are rendered. If the page referenced as Master Page is renamed, the Unified Page Set is not affected and will remain operational.

Mode

The Unified Page Set's mode is set to "None". This disables Unified Page Set handling and renders full pages.