Migrating Existing Customizations to Custom Questions

Custom Questions Version 1

To migrate your question customizations to custom questions:

Go to the CQ client app and create a new CQ.
In the Create CQ modal dialog, specify:
1. Your custom question name (visible in the SD Add question view and the CQ client). For example, "My new question type".
2. The Base Forsta question type, for example "SingleForm".
3. The template (Nodejs pipeline is recommended).
Open runtime/component.js in your favorite code editor.
Inside default exported function implementation, insert your existing customization from a Javascript tab.
Replace magic variable currentQuestion with question (function argument).
If you have file library dependencies in a theme, copy those files to the Custom Question runtime folder and add them to metadata.json in the deps section as relative links.
If you have external dependencies in a theme, add them to metadata.json in the deps section as absolute links.
1. It is recommended to convert external dependencies to npm dependencies and use import statements in the code instead of adding them to the metadata.json.
Change the icon to a custom png/svg image.

Custom Questions Version 2

CQ v2 pipeline changes server behavior for CQ to easily support additional features such as Export, Replication, DevMode etc. CQ v1 (current) will continue to work until CQ GA release, then it will be deprecated, so you are recommended to migrate to v2 ASAP.

CQ v2 does not have any serverside logic for CQ content manipulation in comparison with CQ v1, so CQ v2 files are hosted in a file library as-is without any modifications.

If you see in a CQ client app list that your CQ is not "v2" but "old", then it requires migration.

Figure 1 - Custom Question requires migration

Migration

Step 1: Update metadata.json file

Add "schemaVersion": 2 to the metadata.json file.

Before

{
  "id": "b3fcf125-a27a-4012-b33b-feddd006a138",
  "name": "devmode",
  "description": "",
  "baseQuestionType": "SingleForm",
  "disableDefaultRendering": true,
  "iconUrl": "design/icon.svg",
  "designEntryPoint": "design/index.html",
  "runtimeEntryPoint": {
    "component": "runtime/component.js",
    "deps": {
      "scripts": [],
      "styles": []
    }
  }
}

After

{
  "id": "b3fcf125-a27a-4012-b33b-feddd006a138",
  "schemaVersion": 2,
  "name": "devmode",
  "description": "",
  "baseQuestionType": "SingleForm",
  "disableDefaultRendering": true,
  "iconUrl": "design/icon.svg",
  "designEntryPoint": "design/index.html",
  "runtimeEntryPoint": {
    "component": "runtime/component.js",
    "deps": {
      "scripts": [],
      "styles": []
    }
  }
}

Step 2: Update runtime entry point code

Replace "register" magic function call (implicit CQ registration) in runtime component entry point with implicit CQ registration via ResponsiveRendering API’s registerCustomQuestion call. Use the same CQ ID as you have in your metadata.json for the registration.

Before

/* global register */
register(function (question, customQuestionSettings, questionViewSettings) {
    // TODO: put your code here
});

After

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

If you are using nodejs pipeline and use imports, you can write it as below (using the exported runApp function from the other file).

import runApp from "./component";
(function () {
  Confirmit.pageView.registerCustomQuestion("b3fcf125-a27a-4012-b33b-feddd006a138", runApp);
})();

Step 3: Upload migrated CQ to Forsta

Forsta Survey Designer Support

Articles in this section

In this article