Frontend context to get current form fields

[enkelmedia]

I'm working on a custom Property Editor UI for forms where I would like to get all the fields for the current form.

I know that the NPM-package is work in progress but I wanted to ask.

1. Is there any way for me to access the fields from within a property editor ui?
2. Will this be supported with the upcoming NPM package?

[AndyButland]

Yes, we had exactly the same need in building an integration for Forms where we wanted to get all the fields from the current form. For now, we did it by creating a management API controller within the package to make available the fields for the form - but that's not ideal clearly, as the data is already in the browser.

So for 1. - that's the workaround for now. And for 2. - yes, that's one of the use cases we want to meet.

[enkelmedia]

Thanks @AndyButland!

In my scenario, building a property editor ui to be used for a workflow type, the list of fields needs to be "real time" so fetching from the server is indeed not optimal since the form might not have been saved when workflow actions are edited.

I kind of hacked around and found that this information is available on your UmbWorkspaceContext, it's a public API but I'm not sure if you will consider it public and not change in minors?

It looks like this works, I guess it might be fragile, but this solves the need that I currently have:

this.consumeContext('UmbWorkspaceContext', (i)=>{
  var instance = i as FakeFormsWorkspaceContext;

  console.log('Forms UmbWorkspaceContext',instance);

  this.observe(instance.data,(forms)=>{

    console.log('Forms data',forms);

    // This will list form fields
    forms.pages.forEach((page)=>{
      page.fieldSets.forEach((fieldSet)=>{
        fieldSet.containers.forEach((container)=>{
          container.fields.forEach((field)=>{
            console.log('field',field);
          })
        })
      })
    });
  });
});

In the future, it would be nice to know that this (or something similar) is considered public API, and also if the types was exposed via a NPM package, much like I've done with my e-mail package

https://www.npmjs.com/package/@newsletterstudio/umbraco

Cheers!

[AndyButland]

That's ingenious, but may not be the best way to go about if when we get the npm package ready. I'd expect then you'll be able to use our "form context", which will give you methods like getAllFields so you don't have to parse them yourself.

I've tagged this issue along with the work we have in our internal tracker, so we'll make sure to update here when we have it ready, and illustrate how we are using it in our integrations. // @dtng95 ... FYI.

[enkelmedia]

Great stuff :) Thanks for keeping me posted.

Cheers!

[eqtr-ab]

Is this still in progress? I'm trying to incorporate a picker of multiple form fields in a custom workflow as a neater alternative to just specifying field aliases in a text field.

[rickbutterfield]

Hi all,

With the release of Forms 16.2.0, there is also now an initial release of @umbraco-forms/backoffice on npm to allow you to get access to some of this front end data. For example, based on what @enkelmedia was trying to do, you can now achieve this with the following:

import { Field, FormsFormWorkspaceContext, FORMS_FORM_WORKSPACE_CONTEXT } from "@umbraco-forms/backoffice";

export class MyFieldPreviewSliderElement extends UmbElementMixin(LitElement) {
  #formsContext?: FormsFormWorkspaceContext;
  fields: Field[] = [];

  constructor() {
    super();

    this.consumeContext(FORMS_FORM_WORKSPACE_CONTEXT, (context) => {
      this.#formsContext = context;

      if (this.#formsContext) {
        this.fields = this.#formsContext.getAllFields();
      }
    });
  }
}

Please give it a try and report back with any issues!