Login

Learning & Support

Documentation

Advanced Scripting | Sample App 2: Different content for phone vs tablet vs Browser Client

Twixl Support Team Updated: - Created :

In the series Advanced Scripting Sample Apps we explain some use cases on how to use the Advanced Scripting. For more general info, it's very important that you read this KB-article first.

Preview with the Twixl App

You can preview this app by scanning the QR code with the Twixl app.

Replace QR-Code

Use Case

In this example, we show different content on phone vs tablet vs the Browser Client

Instructions

Preparations

  1. Create a new app
  2. Add the following content items in the Root Collection:
    • Placeholder for tablet
      • Type: Placeholder
      • Name: tablet
      • Title: Tablet
    • Placeholder for phone
      • Type: Placeholder
      • Name: phone
      • Title: Phone
    • Placeholder for browser
      • Type: Placeholder
      • Name: browser
      • Title: Browser
    • Placeholder for the other content
      • Type: Placeholder
      • Name: any
      • Title: Any
  3. Setup your Advanced Scripting (see below)

Advanced Scripting Settings

For the Root Collection:

// Executed once for every collection before the filtering of the items
function setupFilter(collection, environment) {
}

// Executed for once for every collection
function shouldShowCollection(collection, environment) {
    return true;
}

// Executed for every single content item
function shouldShowItem(contentItem, collection, environment) {
    if (contentItem.Name == "browser") {
        return environment.IsBrowser();
    } else if (contentItem.Name == "phone") {
        return environment.IsPhone();
    } else if (contentItem.Name == "tablet") {
        return environment.IsTablet();
    } else {
        return true;
    }
}

// Executed once for every collection after the filtering of the items
function teardownFilter(collection, environment) {
}

Was this article helpful?

0 out of 0 found this helpful