Skip to content

Commit

Permalink
Merge pull request #1307 from PaoloPia/dynamicFormImprovements
Browse files Browse the repository at this point in the history 
Added support for hidden fields in DynamicForm control
  • Loading branch information
@AJIXuMuK
AJIXuMuK authored Sep 17, 2022
2 parents 1d7322d + 5953ac2 commit e0e16c8
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 144 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"enhancements": [
"`DynamicForm`: Add taxonomy tree to test harness [#1269](https://github.com/pnp/sp-dev-fx-controls-react/pull/1269)",
"`ModernTaxonomyPicker`: ability to disallow selecting children [#1279](https://github.com/pnp/sp-dev-fx-controls-react/pull/1279)",
"`PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273)"
"`PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273)",
"`DynamicForm`: Allow to hide fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307)"
],
"fixes": [
"`PeoplePicker`: fixes where people picker returns no results [#1292](https://github.com/pnp/sp-dev-fx-controls-react/issues/1292)",
Expand Down
290 changes: 147 additions & 143 deletions src/controls/dynamicForm/DynamicForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,168 +331,172 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
const responseValue = listFeilds.value;
for (let i = 0, len = responseValue.length; i < len; i++) {
const field = responseValue[i];
order++;
const fieldType = field.TypeAsString;
field.order = order;
let hiddenName = "";
let termSetId = "";
let lookupListId = "";
let lookupField = "";
const choices: IDropdownOption[] = [];
let defaultValue = null;
const selectedTags: any = []; // eslint-disable-line @typescript-eslint/no-explicit-any
let richText = false;
let dateFormat: DateFormat | undefined;
let principalType = "";
if (item !== null) {
defaultValue = item[field.EntityPropertyName];
}
else {
defaultValue = field.DefaultValue;
}
if (fieldType === 'Choice' || fieldType === 'MultiChoice') {
field.Choices.forEach(element => {
choices.push({ key: element, text: element });
});
}
else if (fieldType === "Note") {
richText = field.RichText;
}
else if (fieldType === "Lookup") {
lookupListId = field.LookupList;
lookupField = field.LookupField;
if (item !== null) {
defaultValue = await this._spService.getLookupValue(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
}
else {
defaultValue = [];
}

}
else if (fieldType === "LookupMulti") {
lookupListId = field.LookupList;
lookupField = field.LookupField;
// Handle only fields that are not marked as hidden
if (this.props.hiddenFields.indexOf(field.EntityPropertyName) < 0) {
order++;
const fieldType = field.TypeAsString;
field.order = order;
let hiddenName = "";
let termSetId = "";
let lookupListId = "";
let lookupField = "";
const choices: IDropdownOption[] = [];
let defaultValue = null;
const selectedTags: any = []; // eslint-disable-line @typescript-eslint/no-explicit-any
let richText = false;
let dateFormat: DateFormat | undefined;
let principalType = "";
if (item !== null) {
defaultValue = await this._spService.getLookupValues(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
defaultValue = item[field.EntityPropertyName];
}
else {
defaultValue = [];
defaultValue = field.DefaultValue;
}
}
else if (fieldType === "TaxonomyFieldTypeMulti") {
const response = await this._spService.getTaxonomyFieldInternalName(this.props.listId, field.InternalName, this.webURL);
hiddenName = response.value;
termSetId = field.TermSetId;
if (item !== null) {
item[field.InternalName].forEach(element => {
selectedTags.push({ key: element.TermGuid, name: element.Label });
if (fieldType === 'Choice' || fieldType === 'MultiChoice') {
field.Choices.forEach(element => {
choices.push({ key: element, text: element });
});

defaultValue = selectedTags;
}
else {
if (defaultValue !== "") {
defaultValue.split(/#|;/).forEach(element => {
if (element.indexOf('|') !== -1)
selectedTags.push({ key: element.split('|')[1], name: element.split('|')[0] });
});

defaultValue = selectedTags;
else if (fieldType === "Note") {
richText = field.RichText;
}
else if (fieldType === "Lookup") {
lookupListId = field.LookupList;
lookupField = field.LookupField;
if (item !== null) {
defaultValue = await this._spService.getLookupValue(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
}
else {
defaultValue = [];
}

}
if (defaultValue === "")
defaultValue = null;
}
else if (fieldType === "TaxonomyFieldType") {

termSetId = field.TermSetId;
if (item !== null) {
const response = await this._spService.getSingleManagedMtadataLabel(listId, listItemId, field.InternalName);
if (response) {
selectedTags.push({ key: response.TermID, name: response.Label });
defaultValue = selectedTags;
else if (fieldType === "LookupMulti") {
lookupListId = field.LookupList;
lookupField = field.LookupField;
if (item !== null) {
defaultValue = await this._spService.getLookupValues(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
}
else {
defaultValue = [];
}
}
else {
if (defaultValue !== "") {
selectedTags.push({ key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1] });
else if (fieldType === "TaxonomyFieldTypeMulti") {
const response = await this._spService.getTaxonomyFieldInternalName(this.props.listId, field.InternalName, this.webURL);
hiddenName = response.value;
termSetId = field.TermSetId;
if (item !== null) {
item[field.InternalName].forEach(element => {
selectedTags.push({ key: element.TermGuid, name: element.Label });
});

defaultValue = selectedTags;
}
else {
if (defaultValue !== "") {
defaultValue.split(/#|;/).forEach(element => {
if (element.indexOf('|') !== -1)
selectedTags.push({ key: element.split('|')[1], name: element.split('|')[0] });
});

defaultValue = selectedTags;
}
}
if (defaultValue === "")
defaultValue = null;
}
if (defaultValue === "")
defaultValue = null;
}
else if (fieldType === "DateTime") {
if (item !== null && item[field.InternalName])
defaultValue = new Date(item[field.InternalName]);
else if (defaultValue === '[today]') {
defaultValue = new Date();
}

const schemaXml = field.SchemaXml;
const dateFormatRegEx = /\s+Format="([^"]+)"/gmi.exec(schemaXml);
dateFormat = dateFormatRegEx && dateFormatRegEx.length ? dateFormatRegEx[1] as DateFormat : 'DateOnly';

}
else if (fieldType === "UserMulti") {
if (item !== null)
defaultValue = await this._spService.getUsersUPNFromFieldValue(listId, listItemId, field.InternalName, this.webURL);
else {
defaultValue = [];
else if (fieldType === "TaxonomyFieldType") {

termSetId = field.TermSetId;
if (item !== null) {
const response = await this._spService.getSingleManagedMtadataLabel(listId, listItemId, field.InternalName);
if (response) {
selectedTags.push({ key: response.TermID, name: response.Label });
defaultValue = selectedTags;
}
}
else {
if (defaultValue !== "") {
selectedTags.push({ key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1] });
defaultValue = selectedTags;
}
}
if (defaultValue === "")
defaultValue = null;
}
else if (fieldType === "DateTime") {
if (item !== null && item[field.InternalName])
defaultValue = new Date(item[field.InternalName]);
else if (defaultValue === '[today]') {
defaultValue = new Date();
}

const schemaXml = field.SchemaXml;
const dateFormatRegEx = /\s+Format="([^"]+)"/gmi.exec(schemaXml);
dateFormat = dateFormatRegEx && dateFormatRegEx.length ? dateFormatRegEx[1] as DateFormat : 'DateOnly';

}
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
principalType = principalType.substring(0, principalType.indexOf('"'));
}
else if (fieldType === "Thumbnail") {
if (defaultValue !== null) {
defaultValue = this.webURL.split('/sites/')[0] + JSON.parse(defaultValue).serverRelativeUrl;
else if (fieldType === "UserMulti") {
if (item !== null)
defaultValue = await this._spService.getUsersUPNFromFieldValue(listId, listItemId, field.InternalName, this.webURL);
else {
defaultValue = [];
}
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
principalType = principalType.substring(0, principalType.indexOf('"'));
}
}
else if (fieldType === "User") {
if (item !== null) {
const userEmails: string[] = [];
userEmails.push(await this._spService.getUserUPNById(parseInt(item[field.InternalName + "Id"])) + '');
defaultValue = userEmails;
else if (fieldType === "Thumbnail") {
if (defaultValue !== null) {
defaultValue = this.webURL.split('/sites/')[0] + JSON.parse(defaultValue).serverRelativeUrl;
}
}
else {
defaultValue = [];
else if (fieldType === "User") {
if (item !== null) {
const userEmails: string[] = [];
userEmails.push(await this._spService.getUserUPNById(parseInt(item[field.InternalName + "Id"])) + '');
defaultValue = userEmails;
}
else {
defaultValue = [];
}
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
principalType = principalType.substring(0, principalType.indexOf('"'));
}
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
principalType = principalType.substring(0, principalType.indexOf('"'));
}
else if (fieldType === "Location") {
defaultValue = JSON.parse(defaultValue);
}
else if (fieldType === "Boolean") {
defaultValue = Boolean(Number(defaultValue));
else if (fieldType === "Location") {
defaultValue = JSON.parse(defaultValue);
}
else if (fieldType === "Boolean") {
defaultValue = Boolean(Number(defaultValue));
}

tempFields.push({
newValue: null,
fieldTermSetId: termSetId,
options: choices,
lookupListID: lookupListId,
lookupField: lookupField,
changedValue: defaultValue,
fieldType: field.TypeAsString,
fieldTitle: field.Title,
fieldDefaultValue: defaultValue,
context: this.props.context,
disabled: this.props.disabled || (disabledFields && disabledFields.indexOf(field.InternalName) > -1),
listId: this.props.listId,
columnInternalName: field.EntityPropertyName,
label: field.Title,
onChanged: this.onChange,
required: field.Required,
hiddenFieldName: hiddenName,
Order: field.order,
isRichText: richText,
dateFormat: dateFormat,
listItemId: listItemId,
principalType: principalType,
description: field.Description
});
tempFields.sort((a, b) => a.Order - b.Order);
}

tempFields.push({
newValue: null,
fieldTermSetId: termSetId,
options: choices,
lookupListID: lookupListId,
lookupField: lookupField,
changedValue: defaultValue,
fieldType: field.TypeAsString,
fieldTitle: field.Title,
fieldDefaultValue: defaultValue,
context: this.props.context,
disabled: this.props.disabled || (disabledFields && disabledFields.indexOf(field.InternalName) > -1),
listId: this.props.listId,
columnInternalName: field.EntityPropertyName,
label: field.Title,
onChanged: this.onChange,
required: field.Required,
hiddenFieldName: hiddenName,
Order: field.order,
isRichText: richText,
dateFormat: dateFormat,
listItemId: listItemId,
principalType: principalType,
description: field.Description
});
tempFields.sort((a, b) => a.Order - b.Order);
}

this.setState({ fieldCollection: tempFields });
Expand Down
6 changes: 6 additions & 0 deletions src/controls/dynamicForm/IDynamicFormProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,17 @@ export interface IDynamicFormProps {
* Used to execute WebSearch. If not provided SearchTab will not be available.
*/
//bingAPIKey?: string;

/**
* InternalName of fields that should be disabled
*/
disabledFields?: string[];

/**
* InternalName of fields that should be hidden
*/
hiddenFields?: string[];

/**
* Absolute Web Url of target site (user requires permissions)
* */
Expand Down

0 comments on commit e0e16c8

Please sign in to comment.