Advanced screen flows

Intoduction

Message flows are the ideal way te create input scenarios in Rogerthat, but sometimes that is not enough.

We extended these message flows with 2 things:

Javascript validation

This validation can only be used in form messages such as sliders, text input boxes, single selectm multi select…
So what we want to do here is validate the user input, if the value was not “john.doe@example.com” we return an error.

The return value needs to be true or a string in case of an error.

Example of a text input box:

var run = function(result, rogerthat){
    var v = result.value.trim();
    if (v == "") {
        return "Please enter an email address;
    } else if (v == "john.doe@example.com") {
        return "Please enter 'john.doe@example.com' to continue.";
    }
    return true;
};

Flow code

The code of a Flow Code block needs to have a function named run. This run function should return an object with the following properties:

  • outlet: The name of the outlet you want as your next step
  • defaultValue: The default value of your next step (optional)
  • message: The message of your next step (optional)

Example

Imagine a message flow with a Text Block as first step. It asks for a number between 1 and 11. Then there is a Flow Code block with 12 outlets having identifiers “0” to “11”.
Outlets
0. connected to the first step, in case the input was unexpected
1. connected to a text line
2. connected to a text block
3. connected to an auto complete
4. connected to a single select
5. connected to a multi select
6. connected to a date select with mode date
7. connected to a date select with mode date and time
8. connected to a date select with mode time
9. connected to a single slider
10. connected to a range slider
11. connected to an advanced order

var run = function(rogerthat, messageFlowRun) {
    var steps = messageFlowRun.steps;
    var lastStep = steps[steps.length -1];
    var input = lastStep.form_result.result.value;

    var nextStepResult = {
        outlet: input,
        defaultValue: null,
        message: null
    };

    if (input == "1") {
        // text_line
        nextStepResult.defaultValue = "1 - text line widget";
    } else if (input == "2") {
        // text_block
        nextStepResult.defaultValue = "2 - text block widget";
    } else if (input == "3") {
        // auto_complete
        nextStepResult.defaultValue = "3 - auto complete widget";
    } else if (input == "4") {
        // single_select
        nextStepResult.defaultValue = "ss2";
    } else if (input == "5") {
        // multi_select
        nextStepResult.defaultValue = ["ms2", "ms3", "ms4"];
    } else if (input == "6") {
        // date_select - date
        var today = now();
        today -= (today % 86400);
        nextStepResult.defaultValue = today + (2 * 86400);
    } else if (input == "7") {
        // date_select - date & time
        nextStepResult.defaultValue = now() + (2 * 86400);
    } else if (input == "8") {
        // date_select - time
        nextStepResult.defaultValue = now() + (2 * 86400);
    } else if (input == "9") {
        // single_slider
        nextStepResult.defaultValue = 55.55;
    } else if (input == "10") {
        // range_slider
        nextStepResult.defaultValue = [25.55, 78.12];
    } else if (input == "11") {
        // advanced_order
        nextStepResult.defaultValue = {
            "categories": {
                "romance" : {
                    "items": {
                        "1" : {
                            "id": "1",
                            "name": "Fifty Shades of Grey",
                            "description": "by E.L. James",
                            "value": 2,
                            "unit": "pc.",
                            "unit_price": 999,
                            "step": 1,
                            "step_unit": "pc.",
                            "step_unit_conversion": 1,
                            "image_url": "https://d2arxad8u2l0g7.cloudfront.net/books/1385207843l/10818853.jpg",
                            "has_price": true
                        }
                    }
                }
            }
        };
    } else {
        // unexpected input
        nextStepResult.outlet = "0";
        nextStepResult.message = "Please enter a valid number (1 to 11)";
    }

    return nextStepResult;
};

var now = function() {
    // return seconds since 1/1/1970
    return parseInt(new Date().getTime() / 1000);
};

Result object

Text line, text box and auto complete

  • type: unicode_result
  • value: “the value of the input”

Single select

  • type: unicode_result
  • value: “the selected radio button”

Multi select

  • type: unicode_list_result
  • values: [“selected checkbox 1”, “selected checkbox 2”]

Date select

  • type: long_result
  • value: 1331212164

Single slider

  • type: float_result
  • value: 5.64

Range slider

  • type: float_list_result
  • values: [5.64, 7.85]

Advanced order

Rogerthat object

{
    "rogerthat.user": {
        "name": "John Doe",
        "account": "john.doe@foo.com",
        "avatarUrl": "https://rogerth.at/unauthenticated/mobi/cached/avatar/4824964683268096",
        "language": "pt_BR",
        "data": {"xmpp_username": "john", "xmpp_password": "doe"}
    },
    "rogerthat.service": {
        "name": "Service identity 1",
        "email": "info@foo.com",
        "account": "s1@foo.com/i1",
        "data": {"xmpp_room": "chatroom1"}
    },
    "rogerthat.system": {
        "os": "ios",
        "version": "7.1",
        "appVersion": "1.0.150.I",
        "appName": "Rogerthat",
        "appId": "rogerthat"
    }
}

Message flow run object

{
    "flow_id": "1516f2a4-aefc-490c-b1e7-76ae631391f4",
    "steps": [
        {
            "received_timestamp": 1331212149,
            "message_flow_id": "ahNkZXZ-bW9iaWNhZ2VjbG91ZGhycj0LEgptYy10cmFja2VyIgxjYX",
            "step_type": "message_step",
            "step_id": "message_welcome",
            "acknowledged_timestamp": 1331212162,
            "answer_id": "button_yes"
        },
        {
            "received_timestamp": 1331212164,
            "message_flow_id": "ahNkZXZ-bW9iaWNhZ2VjbG91ZGhycj0LEgptYy10cmFja2VyIgxjYX",
            "step_type": "form_step",
            "step_id": "message_price",
            "answer_id": "positive",
            "form_result": {
                "type": "float_list_result",
                "result": {
                    "values": [
                        30.0,
                        50.0
                    ]
                }
            },
            "acknowledged_timestamp": 1331212173
        }
    ]
}

Advanced order object

{
    "currency": "$",
    "categories": [{
        "id": "romance",
        "name": "Romance",
        "items": [{
            "id": "1",
            "name": "Fifty Shades of Grey",
            "description": "by E.L. James",
            "value": 0,
            "unit": "pc.",
            "unit_price": 999,
            "step": 1,
            "step_unit": "pc.",
            "step_unit_conversion": 1,
            "image_url": "https://d2arxad8u2l0g7.cloudfront.net/books/1385207843l/10818853.jpg",
            "has_price": true
        }]
    }, {
        "id": "horror",
        "name": "Horror",
        "items": [{
            "id": "2",
            "name": "'Salem's Lot",
            "description": "by Stephen King",
            "value": 0,
            "unit": "pc.",
            "unit_price": 799,
            "step": 1,
            "step_unit": "pc.",
            "step_unit_conversion": 1,
            "image_url": "https://d2arxad8u2l0g7.cloudfront.net/books/1327891565l/11590.jpg",
            "has_price": true
        }]
    }, {
       "id": "whodunit",
       "name": "Whodunit",
       "items": [{
          "id": "3",
          "name": "Mirror Deep",
          "description": "by Joss Landry",
          "value": 0,
          "unit": "pc.",
          "unit_price": 899,
          "step": 1,
          "step_unit": "pc.",
          "step_unit_conversion": 1,
          "image_url": "https://d2arxad8u2l0g7.cloudfront.net/books/1368021554l/17901969.jpg",
          "has_price": true
      }]
  }]
}