Runtime Component

The Runtime component is rendered by the Survey Engine during a survey run. It usually renders html markup, reads custom question settings and adds client side logic (read/save answers etc).

Declaration

Empty user code js (located in runtime/component.js by default) looks like:

(function () {
  Confirmit.pageView.registerCustomQuestion("b3fcf125-a27a-4012-b33b-feddd006a138", function (question, customQuestionSettings, questionViewSettings) {
      // TODO: put your code here
    });
})();

where

question - ResponsiveRending question model (see https://confirmit.github.io/ResponsiveSurveyRendering/identifiers.html#api-models-questions).
customQuestionSettings - the custom question settings object generated in CQ Settings and passed as is (could be object of any structure).
"b3fcf125-a27a-4012-b33b-feddd006a138"* in this snippet is the CQ ID (this must be the same value as in the metadata.json file).

Customization implementation

There is no custom question API in runtime; the custom question requires only a CQ registration. The actual question customization must be implemented via ResponsiveRendering API as usual.

SE rendering for the custom question is disabled so the user code must render the entire component. The default container id in which to put your markup is questionId (ie <div id='q1'/>). Example on using ResponsiveRendering API: https://confirmit.github.io/ResponsiveSurveyRendering/manual/customQuestions.html#grid-slider-re-rendered

You can use any js frameworks (React, Vue etc) for CQ implementation. Just ensure you add the CQ bundle resulting from transpilation, not the sources.

The CQ must work on IE11, so you as the developer must write IE11-compatible code or use pollyfills.

Best Practice: you should always have a default custom question settings object fallback. If the user does not make any changes in the CQ setting page (or didn’t open it at all), then customQuestionSettings will be null in runtime - the component should expect that.

Example

(function () {
  Confirmit.pageView.registerCustomQuestion("b3fcf125-a27a-4012-b33b-feddd006a138", function (question, customQuestionSettings, questionViewSettings) {
      var settings = customQuestionSettings || {myProp: 'defaultValue'};
      document.getElementById(question.id).innerText = 'hello ' + settings.myProp;
  });
})();

Metadata configuration

The Runtime user control file path configured in metadata.json as:

"runtimeEntryPoint": {
    "component": "runtime/component.js"
}

If you use the npx tool or CQ client app wizard then it is already configured for you. You can change it to any relative path. The entry point must be a valid javascript file.

Runtime dependencies

You can add dependencies for your script - styles and other scripts; these can be relative links or external http links. Dependencies in runtime are loaded in-order (it is just appended to the survey page as <script src={script_dependency} and <link href={style_dependency}).

For example:

"runtimeEntryPoint": {
    "component": "runtime/component.js",
    "deps": {
      "scripts": [
        "https://code.jquery.com/jquery-3.2.1.min.js",
        "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
      ],
      "styles": [
        "runtime/style.css",
        "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
      ]
    }
  }

Dependencies notes:

Be careful with runtime dependencies that expose global objects (for example, jquery). If you want to have multiple CQs on the same survey page then some global objects may be overwritten.
Relative URLs should not start with dots or slashes (the actual URL for relative paths are autogenerated on the server).
The runtimeEntryPoint.component must be a relative file path, dependencies can be absolute urls.
It is not recommended to use links to file library resources in CQ dependencies. The same CQ should work on any Confirmit environment, so if you for example add links pointing to EURO SaaS, then people using it on AUS SaaS will have very bad latency for downloading those resources.