Use calculated values in text processing and expressions, Reactjs Survey Library Example

Use calculated values

Edit in Plunker

Open in new window

Export Pdf

Result
JavaScript
HTML
QR Code


                        

    
        Survey.StylesManager.applyTheme("modern");
    


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


ReactDOM.render(<Survey.Survey model={survey}  />, document.getElementById("surveyElement"));

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Use calculated values in text processing and expressions, Reactjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.js"></script>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="https://surveyjs.azureedge.net/1.5.17/survey.react.js"></script>
<link href="https://surveyjs.azureedge.net/1.5.17/modern.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

settings

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).

Use calculated values

Use calculated values in text processing and expressions

Why We Use Cookies