Skip to content

Commit e0e16c8

Browse files
AJIXuMuKAJIXuMuK
authored
Merge pull request pnp#1307 from PaoloPia/dynamicFormImprovements
Added support for hidden fields in DynamicForm control
2 parents 1d7322d + 5953ac2 commit e0e16c8

File tree

3 files changed

+155
-144
lines changed

3 files changed

+155
-144
lines changed

‎CHANGELOG.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"enhancements": [
88
"`DynamicForm`: Add taxonomy tree to test harness [#1269](https://github.com/pnp/sp-dev-fx-controls-react/pull/1269)",
99
"`ModernTaxonomyPicker`: ability to disallow selecting children [#1279](https://github.com/pnp/sp-dev-fx-controls-react/pull/1279)",
10-
"`PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273)"
10+
"`PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273)",
11+
"`DynamicForm`: Allow to hide fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307)"
1112
],
1213
"fixes": [
1314
"`PeoplePicker`: fixes where people picker returns no results [#1292](https://github.com/pnp/sp-dev-fx-controls-react/issues/1292)",

‎src/controls/dynamicForm/DynamicForm.tsx

Lines changed: 147 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -331,168 +331,172 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
331331
const responseValue = listFeilds.value;
332332
for (let i = 0, len = responseValue.length; i < len; i++) {
333333
const field = responseValue[i];
334-
order++;
335-
const fieldType = field.TypeAsString;
336-
field.order = order;
337-
let hiddenName = "";
338-
let termSetId = "";
339-
let lookupListId = "";
340-
let lookupField = "";
341-
const choices: IDropdownOption[] = [];
342-
let defaultValue = null;
343-
const selectedTags: any = []; // eslint-disable-line @typescript-eslint/no-explicit-any
344-
let richText = false;
345-
let dateFormat: DateFormat | undefined;
346-
let principalType = "";
347-
if (item !== null) {
348-
defaultValue = item[field.EntityPropertyName];
349-
}
350-
else {
351-
defaultValue = field.DefaultValue;
352-
}
353-
if (fieldType === 'Choice' || fieldType === 'MultiChoice') {
354-
field.Choices.forEach(element => {
355-
choices.push({ key: element, text: element });
356-
});
357-
}
358-
else if (fieldType === "Note") {
359-
richText = field.RichText;
360-
}
361-
else if (fieldType === "Lookup") {
362-
lookupListId = field.LookupList;
363-
lookupField = field.LookupField;
364-
if (item !== null) {
365-
defaultValue = await this._spService.getLookupValue(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
366-
}
367-
else {
368-
defaultValue = [];
369-
}
370334

371-
}
372-
else if (fieldType === "LookupMulti") {
373-
lookupListId = field.LookupList;
374-
lookupField = field.LookupField;
335+
// Handle only fields that are not marked as hidden
336+
if (this.props.hiddenFields.indexOf(field.EntityPropertyName) < 0) {
337+
order++;
338+
const fieldType = field.TypeAsString;
339+
field.order = order;
340+
let hiddenName = "";
341+
let termSetId = "";
342+
let lookupListId = "";
343+
let lookupField = "";
344+
const choices: IDropdownOption[] = [];
345+
let defaultValue = null;
346+
const selectedTags: any = []; // eslint-disable-line @typescript-eslint/no-explicit-any
347+
let richText = false;
348+
let dateFormat: DateFormat | undefined;
349+
let principalType = "";
375350
if (item !== null) {
376-
defaultValue = await this._spService.getLookupValues(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
351+
defaultValue = item[field.EntityPropertyName];
377352
}
378353
else {
379-
defaultValue = [];
354+
defaultValue = field.DefaultValue;
380355
}
381-
}
382-
else if (fieldType === "TaxonomyFieldTypeMulti") {
383-
const response = await this._spService.getTaxonomyFieldInternalName(this.props.listId, field.InternalName, this.webURL);
384-
hiddenName = response.value;
385-
termSetId = field.TermSetId;
386-
if (item !== null) {
387-
item[field.InternalName].forEach(element => {
388-
selectedTags.push({ key: element.TermGuid, name: element.Label });
356+
if (fieldType === 'Choice' || fieldType === 'MultiChoice') {
357+
field.Choices.forEach(element => {
358+
choices.push({ key: element, text: element });
389359
});
390-
391-
defaultValue = selectedTags;
392360
}
393-
else {
394-
if (defaultValue !== "") {
395-
defaultValue.split(/#|;/).forEach(element => {
396-
if (element.indexOf('|') !== -1)
397-
selectedTags.push({ key: element.split('|')[1], name: element.split('|')[0] });
398-
});
399-
400-
defaultValue = selectedTags;
361+
else if (fieldType === "Note") {
362+
richText = field.RichText;
363+
}
364+
else if (fieldType === "Lookup") {
365+
lookupListId = field.LookupList;
366+
lookupField = field.LookupField;
367+
if (item !== null) {
368+
defaultValue = await this._spService.getLookupValue(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
369+
}
370+
else {
371+
defaultValue = [];
401372
}
373+
402374
}
403-
if (defaultValue === "")
404-
defaultValue = null;
405-
}
406-
else if (fieldType === "TaxonomyFieldType") {
407-
408-
termSetId = field.TermSetId;
409-
if (item !== null) {
410-
const response = await this._spService.getSingleManagedMtadataLabel(listId, listItemId, field.InternalName);
411-
if (response) {
412-
selectedTags.push({ key: response.TermID, name: response.Label });
413-
defaultValue = selectedTags;
375+
else if (fieldType === "LookupMulti") {
376+
lookupListId = field.LookupList;
377+
lookupField = field.LookupField;
378+
if (item !== null) {
379+
defaultValue = await this._spService.getLookupValues(listId, listItemId, field.EntityPropertyName, lookupField, this.webURL);
380+
}
381+
else {
382+
defaultValue = [];
414383
}
415384
}
416-
else {
417-
if (defaultValue !== "") {
418-
selectedTags.push({ key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1] });
385+
else if (fieldType === "TaxonomyFieldTypeMulti") {
386+
const response = await this._spService.getTaxonomyFieldInternalName(this.props.listId, field.InternalName, this.webURL);
387+
hiddenName = response.value;
388+
termSetId = field.TermSetId;
389+
if (item !== null) {
390+
item[field.InternalName].forEach(element => {
391+
selectedTags.push({ key: element.TermGuid, name: element.Label });
392+
});
393+
419394
defaultValue = selectedTags;
420395
}
396+
else {
397+
if (defaultValue !== "") {
398+
defaultValue.split(/#|;/).forEach(element => {
399+
if (element.indexOf('|') !== -1)
400+
selectedTags.push({ key: element.split('|')[1], name: element.split('|')[0] });
401+
});
402+
403+
defaultValue = selectedTags;
404+
}
405+
}
406+
if (defaultValue === "")
407+
defaultValue = null;
421408
}
422-
if (defaultValue === "")
423-
defaultValue = null;
424-
}
425-
else if (fieldType === "DateTime") {
426-
if (item !== null && item[field.InternalName])
427-
defaultValue = new Date(item[field.InternalName]);
428-
else if (defaultValue === '[today]') {
429-
defaultValue = new Date();
430-
}
431-
432-
const schemaXml = field.SchemaXml;
433-
const dateFormatRegEx = /\s+Format="([^"]+)"/gmi.exec(schemaXml);
434-
dateFormat = dateFormatRegEx && dateFormatRegEx.length ? dateFormatRegEx[1] as DateFormat : 'DateOnly';
435-
436-
}
437-
else if (fieldType === "UserMulti") {
438-
if (item !== null)
439-
defaultValue = await this._spService.getUsersUPNFromFieldValue(listId, listItemId, field.InternalName, this.webURL);
440-
else {
441-
defaultValue = [];
409+
else if (fieldType === "TaxonomyFieldType") {
410+
411+
termSetId = field.TermSetId;
412+
if (item !== null) {
413+
const response = await this._spService.getSingleManagedMtadataLabel(listId, listItemId, field.InternalName);
414+
if (response) {
415+
selectedTags.push({ key: response.TermID, name: response.Label });
416+
defaultValue = selectedTags;
417+
}
418+
}
419+
else {
420+
if (defaultValue !== "") {
421+
selectedTags.push({ key: defaultValue.split('|')[1], name: defaultValue.split('|')[0].split('#')[1] });
422+
defaultValue = selectedTags;
423+
}
424+
}
425+
if (defaultValue === "")
426+
defaultValue = null;
427+
}
428+
else if (fieldType === "DateTime") {
429+
if (item !== null && item[field.InternalName])
430+
defaultValue = new Date(item[field.InternalName]);
431+
else if (defaultValue === '[today]') {
432+
defaultValue = new Date();
433+
}
434+
435+
const schemaXml = field.SchemaXml;
436+
const dateFormatRegEx = /\s+Format="([^"]+)"/gmi.exec(schemaXml);
437+
dateFormat = dateFormatRegEx && dateFormatRegEx.length ? dateFormatRegEx[1] as DateFormat : 'DateOnly';
438+
442439
}
443-
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
444-
principalType = principalType.substring(0, principalType.indexOf('"'));
445-
}
446-
else if (fieldType === "Thumbnail") {
447-
if (defaultValue !== null) {
448-
defaultValue = this.webURL.split('/sites/')[0] + JSON.parse(defaultValue).serverRelativeUrl;
440+
else if (fieldType === "UserMulti") {
441+
if (item !== null)
442+
defaultValue = await this._spService.getUsersUPNFromFieldValue(listId, listItemId, field.InternalName, this.webURL);
443+
else {
444+
defaultValue = [];
445+
}
446+
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
447+
principalType = principalType.substring(0, principalType.indexOf('"'));
449448
}
450-
}
451-
else if (fieldType === "User") {
452-
if (item !== null) {
453-
const userEmails: string[] = [];
454-
userEmails.push(await this._spService.getUserUPNById(parseInt(item[field.InternalName + "Id"])) + '');
455-
defaultValue = userEmails;
449+
else if (fieldType === "Thumbnail") {
450+
if (defaultValue !== null) {
451+
defaultValue = this.webURL.split('/sites/')[0] + JSON.parse(defaultValue).serverRelativeUrl;
452+
}
456453
}
457-
else {
458-
defaultValue = [];
454+
else if (fieldType === "User") {
455+
if (item !== null) {
456+
const userEmails: string[] = [];
457+
userEmails.push(await this._spService.getUserUPNById(parseInt(item[field.InternalName + "Id"])) + '');
458+
defaultValue = userEmails;
459+
}
460+
else {
461+
defaultValue = [];
462+
}
463+
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
464+
principalType = principalType.substring(0, principalType.indexOf('"'));
459465
}
460-
principalType = field.SchemaXml.split('UserSelectionMode="')[1];
461-
principalType = principalType.substring(0, principalType.indexOf('"'));
462-
}
463-
else if (fieldType === "Location") {
464-
defaultValue = JSON.parse(defaultValue);
465-
}
466-
else if (fieldType === "Boolean") {
467-
defaultValue = Boolean(Number(defaultValue));
466+
else if (fieldType === "Location") {
467+
defaultValue = JSON.parse(defaultValue);
468+
}
469+
else if (fieldType === "Boolean") {
470+
defaultValue = Boolean(Number(defaultValue));
471+
}
472+
473+
tempFields.push({
474+
newValue: null,
475+
fieldTermSetId: termSetId,
476+
options: choices,
477+
lookupListID: lookupListId,
478+
lookupField: lookupField,
479+
changedValue: defaultValue,
480+
fieldType: field.TypeAsString,
481+
fieldTitle: field.Title,
482+
fieldDefaultValue: defaultValue,
483+
context: this.props.context,
484+
disabled: this.props.disabled || (disabledFields && disabledFields.indexOf(field.InternalName) > -1),
485+
listId: this.props.listId,
486+
columnInternalName: field.EntityPropertyName,
487+
label: field.Title,
488+
onChanged: this.onChange,
489+
required: field.Required,
490+
hiddenFieldName: hiddenName,
491+
Order: field.order,
492+
isRichText: richText,
493+
dateFormat: dateFormat,
494+
listItemId: listItemId,
495+
principalType: principalType,
496+
description: field.Description
497+
});
498+
tempFields.sort((a, b) => a.Order - b.Order);
468499
}
469-
470-
tempFields.push({
471-
newValue: null,
472-
fieldTermSetId: termSetId,
473-
options: choices,
474-
lookupListID: lookupListId,
475-
lookupField: lookupField,
476-
changedValue: defaultValue,
477-
fieldType: field.TypeAsString,
478-
fieldTitle: field.Title,
479-
fieldDefaultValue: defaultValue,
480-
context: this.props.context,
481-
disabled: this.props.disabled || (disabledFields && disabledFields.indexOf(field.InternalName) > -1),
482-
listId: this.props.listId,
483-
columnInternalName: field.EntityPropertyName,
484-
label: field.Title,
485-
onChanged: this.onChange,
486-
required: field.Required,
487-
hiddenFieldName: hiddenName,
488-
Order: field.order,
489-
isRichText: richText,
490-
dateFormat: dateFormat,
491-
listItemId: listItemId,
492-
principalType: principalType,
493-
description: field.Description
494-
});
495-
tempFields.sort((a, b) => a.Order - b.Order);
496500
}
497501

498502
this.setState({ fieldCollection: tempFields });

‎src/controls/dynamicForm/IDynamicFormProps.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,17 @@ export interface IDynamicFormProps {
5555
* Used to execute WebSearch. If not provided SearchTab will not be available.
5656
*/
5757
//bingAPIKey?: string;
58+
5859
/**
5960
* InternalName of fields that should be disabled
6061
*/
6162
disabledFields?: string[];
6263

64+
/**
65+
* InternalName of fields that should be hidden
66+
*/
67+
hiddenFields?: string[];
68+
6369
/**
6470
* Absolute Web Url of target site (user requires permissions)
6571
* */

0 commit comments

Comments
 (0)