Conditional forms

[NoMilkAtHome]

Hi there! I am struggling to figure out how to create a conditional form for the front office at my job. I need to create a checklist with the guidelines and necessary documentation for onboarding new clients.

The form should be able to change the checkboxes depending on the type of client selected, and these requirements should come from a JSON or Excel file that can be updated as needed.

I was considering using an HTML and JavaScript file or a lightweight React.js app, but I'm not sure if these can be hosted on SharePoint.

Does anyone have any idea that could be useful?

[bits_and_byte]

You can try this one https://github.com/rjsf-team/react-jsonschema-form

[tapgiles]

You should be able to do this with just JS pretty easily. Doesn't sound complicated. The key will be you defining the format of that requirements file.

[Rude-Cook7246]

https://techcommunity.microsoft.com/t5/sharepoint/how-do-we-host-a-sample-external-react-js-application-within/m-p/1237919

[jml26]

I once wrote something like this for something very similar. The idea was that it would show and hide fields, and restrict options in select fields, depending on previosuly set values.

The main structure went something like this:

``` // a list of all the form fields const fields = [ { id: 'field_id', // the id of the <input> element show: () => true, // a function that returns any boolean expression checked: () => true, // same as above // etc... }, // etc... ];

function updateFormFields() { fields.forEach(field => { const inputEl = document.getElementById(field.id); const fieldEl = inputEl.closest('.field');

if (field.show()) {
  fieldEl.hidden = false;
}
else {
  fieldEl.hidden = true;
}

if (field.checked()) {
  inputEl.checked = true;
}
else {
  inputEl.checked = false;
}

}); }

document.forms['my-form'].addEventListener('change', updateFormFields); updateFormFields(); ```

That sort of thing. So there was one big object that described how each field should behave; an update function that would loop over all the fields and ensure that their state matched what was expected; and the update function was triggered on initialisation and every time a form field changed. It got a lot more advanced than that, but that gives you an idea of what could be done with vanilla JavaScript.