Advanced Scripting | Sample App 6: Custom Vars – 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 KB-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 to use the tp-set-custom-vars:// function.

Custom variables allow you to set one or more variables with the following properties:

They are saved on the device
They can be re-used in the advanced scripting

A sample scenario is e.g. to store a user preference and change the content based on that variable.

Instructions

Preparations

Create a new app
Add a content item with the following properties to the Root Collection:
- Type: Web Link
- Title: Set custom vars
- URL: tp-set-custom-vars://?name=Twixl&product=Publisher
Add a content item with the following properties to the root collection:
- Type: Web Link
- Title: Clear custom vars
- URL: tp-set-custom-vars://?name=&product=
Set up your Advanced Scripting (see below)
Run the app in the Twixl app and then go to the Gear menu > Advanced Filter Log to see the log messages.
For the Browser Client, open the Root Collection, append ?debug=1 to the url and you'll see the debug icon in the toolbar.
After tapping the Set Variables, check the debugger again to see that the values are saved

Advanced Scripting Settings

For the Root Collection

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

    var customVars = environment.CustomVars();
    twxlog.InfoDump(customVars);
    
}

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

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

How to use Custom Variables in a HTML-article?

If you want to get a list of Custom Variables from within an HTML-article, you can use the following sample code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tp-get-custom-vars</title>
</head>
<body>
    <script>

        function twixlOnGetCustomVars(customVariablesAsJSON) {
          console.log(customVariablesAsJSON);
        }

        window.location.href = "tp-get-custom-vars://twixlOnGetCustomVars";

    </script>
</body>
</html>

Help

Documentation