Building a Purple Experience
...
Components
Content Component

Access Bundles

7min

Purple Experience



Bundles in the Purple Experience have limited offline functionality. In general, it is not currently possible to download bundles as a whole and use them offline. We are planning a major overhaul of the offline functionality to provide the best possible user experience.

Bundles as Issues

Both, Manager Issues and Purple Issues (Bundles), may be accessed through the Content Component. You need to know what issues are present in your app, as their types are not different from Experience.

Bundles as Dossiers

Dossiers are more flexible in their use of content than issues of any kind. Content can be added, removed or changed at a later date. While it is technically possible to do this with issues, the nature of the binder is different, and you won't usually change anything in an issue.

For more details on Dossiers, please see Dossiers in Purple Hub.

Once you have set up your Purple Hub for Dossiers using the link above, you can set up your Purple Experience accordingly.

To do this, you'll need to add several files to your dynamic resources, assuming you want to do the following:

  • Have an overview page to display all dossiers available
  • Navigate to the Dossier and it's contents
    • Have a special navigation in dossiers for their content
      • table of contents
      • navigation back to website or app
      • navigate from one content in the dossier to another
        • via buttons
        • via swipe action
        • access the dossier as a binder
      • configure a paywall for dossiers

Examples

Dossier overview page

To display all dossiers on an overview Page, you can configure a view with a list of contents and a ContentDataSource that filters for contentType BUNDLE and bundleType DOSSIER, like this:

Document image


In above screenshot, note that openContentActions are configured, which require a properly set up url.resolver.js to work.

Navigate to the Dossier

To navigate to the dossier, from the above view, you'll need to set up views and the ur.resolver.js correspondingly. Start with the views:

We will configure one view to hold all the bundle information, where the contentDataSource is configured to include Bundles of Posts and filters are set to filter for slug: ":contentSlug" AND ContentType: "POST" OR ContentType: "BUNDLE", as follows:

View for bundle info
View for bundle info


And a second view for displaying post inside of Bundles, that will use a path generated from BundleSlug and PostSlug. While filtering the content on :bundleSlug AND ContentTypes POST OR BUNDLE:

Document image


Now we connect those through the url resolver - just add it accordingly:

JS