QOL-8650 improve createFormOptions and createFormController

[devonpis]

• improve flexibility to customise options and controller in createForm function
• expose options and controller with createFormOptions and createFormController props in initFormioInstance
• pass createFormOptions and createFormController by data-attribute of the container div

now user can either define indivdual hook function or a global hook function to customise options and controller in any form instances, thus solve the problem of overlapping hook functions in #16 (comment)

[duttonw]

So let's say this is a text field in the squiz metadata.
Would you attach a custom script to the header with the same function name so its available on the window.

On javascript init:
Are you able to pass it as a pointer to a function OR a string that is looked up form window?

[devonpis]

in squiz, i would NOT surface createFormOptions as a metadata, instead i'll assign a static function name to createFormOptions , ie.

<div id="formio-%asset_assetid%" class="formio_container" 
    data-formio
    data-formio-project-name="%asset_metadata_project-name%"
    data-formio-form-name="%asset_metadata_form-name%"
    data-formio-form-confirmation="%asset_metadata_form-confirmation%"
    data-formio-form-revision="%asset_metadata_form-revision%"
    data-formio-env-url="%begin_asset_metadata_env-url^eq:test%qol-formio-t-api.azurefd.net%else_begin_asset_metadata_env-url^eq:prod%api.forms.platforms.qld.gov.au%else_asset%%asset_metadata_env-url%%end_asset%"
    data-formio-pdf-download="%asset_metadata_pdf-download%"
    data-formio-namespace="%asset_metadata_namespace%"
    data-formio-createForm-options="formioCreateFormOptions"
    data-formio-createForm-controller="formioCreateFormController"
>
<script src="/?a=123456" type="text/javascript"></script>

and then put window.formioCreateFormOptions in a squiz asset JS file for anyone in squiz to do the customisation
ie. asset #123456

window.formioCreateFormController = ({ envUrl, projectName, formName, form }) => {
  if (projectName === "project2" && formName === "form2") {
    form.on("change", (e) => {
      console.info("onChange", e);
    });
  }
};
window.formioCreateFormOptions = ({ envUrl, projectName, formName }) => {
  if ({ envUrl === "api.forms.platforms.qld.gov.au") {
    return {
      readOnly: true,
    };
  }
  if (projectName === "project1") {
    return {
      readOnly: true,
    };
  }
  if (projectName === "project2" && formName === "form2") {
    return {
      readOnly: true,
    };
  }
  return {};
};

by this way the squiz developers will customise the option and controller in a centralise place/file similar to what they currrently do.

but for non-squiz application, the user have the freedom to define individual or global createFormOptions/Controller.

for the second question, on FormioLoader.formioInit(), currently data-formio-createForm-controller is passed as a string that is looked up form the window object

[duttonw]

Looking good, have added a comment about how this is wrapped for cms wysiwyg widget as well as direct javascript init (via ref or string name for controller or option variable)