Dynamic Form to Dev

[ravichandran-blog]

Q	A
Bug fix?	[ ]
New feature?	[ x ]
New sample?	[ ]
Related issues?	fixes #X, partially #Y, mentioned in #Z

What's in this Pull Request?

Dynamic form control

[AJIXuMuK]

Thank you @ravichandran-blog for the PR!
It is a great addition to the library!

The PR has been merged with some additional modifications.
You can review the modifications in the history, but I want to point out some important edits for your future contributions.

Localization

All the texts were hardcoded. We are using standard SPFx localization mechanism to make the controls available on different languages.

Styling

Most of the colors were directly included in scss file. Usually in SPFx solutions it makes sense to use theme variables.

Testing the Functionality

Some of the methods/functions were failing in simple situations.
For example, saveIntoSharePoint in DynamicForm.tsx. It uploads a file using the next request:

let fileresult = await sp.web.getFolderByServerRelativeUrl(this.props.context.pageContext.web.serverRelativeUrl + "/SiteAssets/Lists/" + this.props.listId).files.add(file.fileName, resultcontent, false);

It will fail if SiteAssets/Lists/ListId folder (or any part of it) doesn't exist.

Another example: getLookUpValue in SPService.ts:

const data = await this._context.spHttpClient.get(apiUrl, SPHttpClient.configurations.v1);
if (data.ok) {
  const results = await data.json();
  if (results) {
    return [{ key: results.value[0][fieldName].ID, name: results.value[0][fieldName].Title }];
  }
}

We can pass if (results) condition, but the code will fail if results.value.length === 0 or results.value[0][fieldName] is undefined. And it happens if there is an item but the value for this specific field is not set.

Naming of the Methods

I would recommend to use more clear names for the methods based on what exactly is done.
For example, getListInfo in SPService. It actually requests fields for the list with additional filter based on content type and excluding some additional fields like read-only and hidden. So the name of the method confuses in that case.

Additional Remarks

listFeilds["value"].forEach(async (field) => {
  // do some async stuff
});

// code that should run after all array items are processed

forEach is always synchronous. It will not await for the async callback. You either need to use for loop or other approaches like async-foreach module.

let hiddenname = "";
let TermSetId = "";
let lookupField = "";
let selectedtags: any = [];

You're using different notations for variables names. It makes code harder to read. I would recommend to use camelCase notation everywhere.

Thank you again for the great feature! Hope this code review will be helpful!

[ravichandran-blog]

Hi @AJIXuMuK,

Many thanks! it is helpful