Advanced Scripting | Sample App 7: Multiple Languages – 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 how you can ask the user to select a language and filter Content Items and Collections based on the chosen language.

Instructions

Preparations

Create a new app
Add the following contents item to the Root Collection with the following properties:
- Button to select English
  - Type: Web link
  - Name: select.en
  - Title: English
  - Link to URL: tp-set-custom-vars://?lang=en
- Button to select French
  - Type: Web link
  - Name: select.fr
  - Title: French
  - Link to URL: tp-set-custom-vars://?lang=fr
- English Collection
  - Type: Collection and Link
  - Name: en.collection1
  - Title: English Collection 1
- French Collection
  - Type: Collection and Link
  - Name: fr.collection1
  - Title: French Collection 1
Add a content item to the Sidebar collection with the following properties:
- Type: Web link
- Name: Choose Language
- Link to URL: tp-set-custom-vars://
Set up your Advanced Scripting (see below)

Advanced Scripting Settings

For the Root Collection

// Create a global variable in which we store the language
var language = "";

// Executed once for every collection before the filtering of the items
function setupFilter(collection, environment) {
    language = environment.CustomVar("lang").toLowerCase();
}

// Executed for once for every collection
function shouldShowCollection(collection, environment) {
    return collection.Name.startsWith(language);
}

// Executed for every single content item
function shouldShowItem(contentItem, collection, environment) {
    if (language !== "") {
        return contentItem.Name.startsWith(language);
    }
    return contentItem.Name.startsWith("select.");
}

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

Click to copy

For all other collections and the Sidebar where you want to filter by language

// Create a global variable in which we store the language
var language = "";

// Executed once for every collection before the filtering of the items
function setupFilter(collection, environment) {
    language = environment.CustomVar("lang").toLowerCase();
}

// Executed for once for every collection
function shouldShowCollection(collection, environment) {
    if (language === "") {
        return false;
    }
    return collection.Name.startsWith(language);
}

// Executed for every single content item
function shouldShowItem(contentItem, collection, environment) {
    return true;
}

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

Click to copy

Help

Documentation