[Dynamic Form] Fix for 1788/1794 and add styles property for support customizing styling

[wuxiaojun514]

Q	A
Bug fix?	[x]
New feature?	[x]
New sample?	[ ]
Related issues?	fixes #1788 , partially #1794

What's in this Pull Request?

This PR is mainly for

• Dynamic Form has quite a lot of problems when custom list formatting is enabled. I fixed the issues ([Dynamic Form] Cannot read properties of undefined (reading 'sections') #1788 ,[Dynamic Form] Implement @class extensibility for DynamicForm and DynamicField, add onPreRender delegate. #1794 Bad UI) .
  The author of [Dynamic Form] Implement @class extensibility for DynamicForm and DynamicField, add onPreRender delegate. #1794 provided some other approach to customize the styling but I feel this PR should work.
  Now it will show 3 columns per row if it has custom form layout
  

• Added two properties (styles and className) to support customization on styling and converted this component as style-able component. Deleted the /dynamicForm/DynamicForm.module.scss file and put its content into /dynamicForm/DynamicForm.sytles.ts and /dynamicForm/dynamicField/DynamicField.styles.ts . I kept the same classname on styling to make this change smoothly.

I have documented the new feature on DynamicForm.md and given an example how to overwrite styling

I know it is quite a big change, please let me know if anything missing.

Guidance

• You can delete this section when you are submitting the pull request.
• Please update this PR information accordingly. We'll use this as part of our release notes in monthly communications.
• Please target your PR to dev branch.

[wuxiaojun514]

Hi @joelfmrodrigues , could you look into it if you have some time?
This PR is for fixing two bugs (#1788 ,#1794 ) on Dynamic Form when list has enabled section layout and introduced className and styles property on this control so developer can customize the styling on it.
I also updated the related documentation for the new feature.
This PR changed quite a lot of code so it is very easy to have conflict with other submission ( I already fixed the conflicts two times), so I hope it can be reviewed early...
Please contact me if anything unclear or I need modify it.

[Marinofull]

Hi @joaojmendes any updates here?

[CodingSinceThe80s]

Hi all, just wanted to add my feedback: this would be a very useful feature so looking forward to it 👍

[joelfmrodrigues]

@wuxiaojun514 apologies for the delay, I have seen the email notification when you tagged me a while ago but things have been a bit chaotic (in a good way 😇 ) at my end and I have been unable to look into it

[wuxiaojun514]

Hi @joelfmrodrigues , never mind, just take your time 😄

[michaelmaillot]

Hey @wuxiaojun514, this is a great improvment, thanks!

I made some suggestions and one issue when trying to test on my side, please have a look and let me know.

[michaelmaillot]

I was not able to make this work. I tried it with a required Lookup field, without success:

Did I miss something?

[wuxiaojun514]

It doesn't work on my side as well. Currently subComponentStyles is not working. I will fix it and let you know

[wuxiaojun514]

@michaelmaillot I have fixed it now.
I also updated the sample in documentation https://github.com/wuxiaojun514/sp-dev-fx-controls-react/blob/fix-for-1788-and-add-styles-property/docs/documentation/docs/controls/DynamicForm.md#how-to-use-styles-property
to handle normal text field (the error message in normal text field is generated inside the fluent ui TextField control, so we need use selectors to overwrite it.

          styles={{
            sectionFormField: {
              selectors: {
                ':has(div)': {
                  [`@media (min-width: 1280px)`]: {
                    "min-width": '21%',
                    "max-width": '21%' //force show 4 columns per row in big screen size when enabled list custom formatting
                  }
                },
              },
            },

            subComponentStyles: {
              fieldStyles: {
                errormessage: {
                  "font-size": "18px" //overwrite the error message font size in Dynamic Field for Lookup/Note/Date fields (The error message element is generated directly in Dynamic Field control)
                },
                fieldDisplay: {
                  selectors: {
                    '.ms-TextField-errorMessage': {
                      "font-size": "18px !important" //overwrite the error message font size in Dynamic Field for TextField (error message element is wrapped in Fluent UI TextField control, we cannot modify it directly,we have to use 'selectors' to change it)
                    }
                  }
                }
              }
            }
          }}

[wuxiaojun514]

Hi @michaelmaillot
Much thanks for your review.
I appreciate your guide and testing!
Now I have updated the documentation with your advice and I have fixed typo issues in the code.
Please let me know if anything else needs fixing.

[michaelmaillot]

I tried again and I confirm it works now!

Just a few updates and we'll be good!

[michaelmaillot]

You can remove all the indent made on the code block:

[wuxiaojun514]

done, I removed all indent on this sample code.

[michaelmaillot]

Shouldn't it be written like this?

Suggested change

	FieldEditor:IStyle;
	fieldEditor:IStyle;

[wuxiaojun514]

I have corrected the class name and related document (Actually I copied this name from old DynamicForm.module.scss
file...)

[michaelmaillot]

Hey @wuxiaojun514,

Thanks for the updates, just this last one remaining update and we'll be good for the merge: https://github.com/pnp/sp-dev-fx-controls-react/pull/1913/files#r1993102589

[michaelmaillot]

Merged manually.

Thank you!