Use calculated values

Use calculated values in text processing and expressions

                        

    
        Survey.StylesManager.applyTheme("orange");
    


var json = {
pages: [
    {
    name: "page1",
    elements: [
        {
        type: "text",
        name: "firstname",
        title: "Please type your First Name",
        isRequired: true
        },
        {
        type: "text",
        name: "lastname",
        startWithNewLine: false,
        title: "Last Name",
        isRequired: true
        },
        {
        type: "text",
        name: "birthdate",
        title: "Please type your Birth date:",
        isRequired: true,
        validators: [
            {
            type: "expression",
            text: "You should be 14 years old or older",
            expression: "{age} > 13"
            },
            {
            type: "expression",
            text: "You should be 90 years old or younger",
            expression: "{age} <= 90"
            }
        ],
        inputType: "date"
        }
    ]
    },
    {
    name: "page2",
    elements: [
        {
        type: "checkbox",
        name: "options",
        title:
            "Dear {fullname}. Based on your age ({age}), we can recommend you the following options. Please choose at least one:",
        isRequired: true,
        choices: [
            {
            value: "option 1",
            text: "Option 1, age < 18",
            visibleIf: "{age} < 18"
            },
            {
            value: "option 2",
            text: "Option 2, age < 18",
            visibleIf: "{age} < 18"
            },
            {
            value: "option 3",
            text: "Option 3, age < 18",
            visibleIf: "{age} < 18"
            },
            {
            value: "option 4",
            text: "Option 4, age >= 18 and age < 50",
            visibleIf: "{age} >= 18 and {age} < 50"
            },
            {
            value: "option 5",
            text: "Option 5, age >= 18 and age < 50",
            visibleIf: "{age} >= 18 and {age} < 50"
            },
            {
            value: "option 6",
            text: "Option 6, age >= 18 and age < 50",
            visibleIf: "{age} >= 18 and {age} < 50"
            },
            {
            value: "option 7",
            text: "Option 7, age >= 50",
            visibleIf: "{age} >= 50"
            },
            {
            value: "option 8",
            text: "Option 8, age >= 50",
            visibleIf: "{age} >= 50"
            },
            {
            value: "option 9",
            text: "Option 9, age >= 50",
            visibleIf: "{age} >= 50"
            }
        ]
        }
    ]
    }
  ],
  calculatedValues: [
      {
        name: "fullname",
        expression: "{firstname} + ', ' + {lastname}"
      },
      {
        name: "age",
        expression: "age({birthdate})",
        includeIntoResult: true
      }
  ]
};

window.survey = new Survey.Model(json);


    survey.onComplete.add(function(result) {
        document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.data, null, 3);
    });


function onAngularComponentInit() {
    Survey.SurveyNG.render("surveyElement", { 
        model: survey 
    });
}
var HelloApp =
    ng.core
        .Component({
            selector: 'ng-app',
            template: '<div id="surveyContainer" class="survey-container contentcontainer codecontainer"><div id="surveyElement"></div></div> '})
        .Class({
            constructor: function() {
            },
            ngOnInit: function() {
                onAngularComponentInit();
            }
    });
document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(HelloApp);
});


                    
<!DOCTYPE html>
<html>
<head>
    <title>Use calculated values in text processing and expressions, Angular2 Survey Library Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://npmcdn.com/zone.js/dist/zone-evergreen"></script>
    <script src="https://npmcdn.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core@2.0.0-rc.5/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common@2.0.0-rc.5/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.5/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser@2.0.0-rc.5/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.5/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.16/survey.angular.js"></script>
<link href="https://surveyjs.azureedge.net/1.1.16/survey.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
            <ng-app></ng-app>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

Text processing doesn't support expressions. To deal with it and to allow keep complex expressions simple, we have introduced Calcualted Values in version 1.1.8. Survey class has calculatedValues property, that contains the list of Calculated Value.

CalculatedValue class has 3 properties: name, expression and a boolean property includeIntoResult (false by default). Here is the example of calculated value JSON definition:

{name: "age", expression: "age({birthdate})", includeIntoResult: true}
When the question bithdate is changed, the calculated value is automatically updated it's value (read-only property).