Use custom function in expressions


function rowsWithValue(params) {
   if (!params && params.length < 2) return false;
   var matrixValue = params[0];
   var value = params[1];
   var rowCount = 0;
   for(var key in matrixValue) {
     if(matrixValue[key] == value) rowCount++;
   return rowCount;
Survey.FunctionFactory.Instance.register("rowsWithValue", rowsWithValue);

                    var json = {
  "elements": [
      "type": "matrix",
      "name": "quality",
      "title": "Please indicate if you agree or disagree with the following statements",
      "columns": [
          "value": "agree",
          "text": "Agree"
          "value": "disagree",
          "text": "Disagree"
      "rows": [
          "value": "affordable",
          "text": "Product is affordable"
          "value": "doeswhatitclaims",
          "text": "Product does what it claims"
          "value": "betterthanother",
          "text": "Product is better than other products on the market"
          "value": "easytouse",
          "text": "Product is easy to use"
      "type": "comment",
      "name": "disappointedComment",
      "title": "We are really sorry that our products doesn't suite your needs. Could provide us with some comments to help us imporove it?",
      "visibleIf": "rowsWithValue({quality}, 'disagree') >= 3"
      "type": "comment",
      "name": "approvedComment",
      "title": "Thank you for appreciating our product. Could provide us with some comments to make it event better?",
      "visibleIf": "rowsWithValue({quality}, 'agree') >= 3"

                    window.survey = new Survey.Model(json);
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(, null, 3);
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));

<!DOCTYPE html>
<html lang="en">
    <title>Use custom function in expressions, Reactjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

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

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

Sorry, we can't retrieve the data from server. Please comeback later.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.