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

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 article first.

Preview with the Twixl App

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

Use Case

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

Instructions

Preparations

Create a new app
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
Setup your Advanced Scripting (see below)

Advanced Scripting Settings

1. Exact naming

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) {
}

2. Non-exact naming

In reality, your Content Items will probably have other names (in order to differentiate) and then it's probably not a good idea to call them all phone, or tablet or browser. In reality, you'll probably work with a suffix, a prefix or a name containing one of the parameters mentioned above.

2.1. Using a prefix

If you want to add a prefix to your existing Name for your Content Item, then you need to use the following code:

// 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.startsWith("browser")) {
        return environment.IsBrowser();
    } else if (contentItem.Name.startsWith("phone")) {
        return environment.IsPhone();
    } else if (contentItem.Name.startsWith("tablet")) {
        return environment.IsTablet();
    } else {
        return true;
    }
}

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

The name of your Content Item should then be something like:

browser-contentitem01
phone-contentitem01
tablet-contentitem01

2.2. Using a suffix

If you want to add a suffix to your existing Name for your Content Item, then you need to use the following code:

// 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.endsWith("browser")) {
        return environment.IsBrowser();
    } else if (contentItem.Name.endsWith("phone")) {
        return environment.IsPhone();
    } else if (contentItem.Name.endsWith("tablet")) {
        return environment.IsTablet();
    } else {
        return true;
    }
}

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

The name of your Content Items should then be something like:

contentitem01-browser
contentitem01-phone
contentitem02-tablet

Help

Documentation