Create custom forms in SPO

[joef]

Hi All,

How do I customize an SPO list's forms?  I need a "New Item" and an "Edit Item" form. 

When I customize forms from the list, it only gives me one edit form.  I guess one form is fine, as long as I can tell the form it is a new item and I only want to show "x ", "y"  and "z" columns for step 1.

On edit only show "A", "B" columns for step 2.  

If A&B are loaded show other columns for step 3.

I have a request to create a request form.  there are 3 steps to a workflow.  

1) Manager submits request "X", "Y", "Z" columns (New Item)

2) IT member makes an adjustment "A", "B" columns (Edit Item)

3) Sales Audit approves changes and completes WF.  "C", "D" columns (Edit Item)

Once I get the forms, I know how to show and hide what I want to show the users

TIA,

Joe

[Pstork1 · Accepted solution]

You can do separate New and Edit forms if you use the OnNew and OnEdit properties of the app to switch to a particular form.  you can find information about how to leverage OnNew, OnEdit, and OnView in this article.

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/sharepoint-form-integration

[v-yutliu-msft]

Hi @joef ,

Do you want different users get different fields in form?

1)Manager: "X", "Y", "Z" columns (New Item)

2)IT member: "A", "B" columns (Edit Item)

3) Sales Audit :"C", "D" columns (Edit Item)

Could you tell me

1)if the user is not a manager, what will happen when he opens a new form?

2)if the user is  a manager, what will happen when he opens an edit form?

I assume that in these two situations, he would not be able to open the form.

I've made a similar test for your reference:

1)create a list with people information data (listA)

position(text type)         employee(single person field)

2)customize your SPO list's form (listB):

connect this form with listA and listB

insert three screens(Screen1,Screen2,Screen3)

In screen1, insert an edit form(Form1), set its data source to this list, choose "X", "Y", "Z" columns in this form.

In screen2, insert an edit form(Form2), set its data source to this list, choose "A", "B" columns in this form.

set form2's Item:

SharePointIntegration.Selected

In screen3, insert an edit form(Form3), set its data source to this list, choose "C", "D" columns in this form.

set form3's Item:

SharePointIntegration.Selected

3)set SharePointIntegration

OnNew:

If(User().Email in Filter(listA,position="Manager",employee).Email,
   Navigate(Screen1);NewForm(Form1)
  )

OnEdit:

If(User().Email in Filter(listA,position="IT member",employee).Email,
   Navigate(Screen2);EditForm(Form2),
User().Email in Filter(listA,position="Sales Audit",employee).Email,
   Navigate(Screen3);EditForm(Form3)
   )

OnSave:

If(User().Email in Filter(listA,position="Manager",employee).Email,
   SubmitForm(Form1),
   User().Email in Filter(listA,position="IT member",employee).Email,
   SubmitForm(Form2),
   User().Email in Filter(listA,position="Sales Audit",employee).Email,
   SubmitForm(Form3)
   )

OnCancel:

ResetForm(Form1);ResetForm(Form2);ResetForm(Form3)

Then different users will open different forms.

Best regards,

[joef]

Thank you @Pstork1 ,

Your solution seems great, but the "On Save" saves the form created when the APP creates. 

How do I tell the On save which form to save?

Thanks Again,

Joe

[joef]

Thanks @v-yutliu-msft ,

I am only using 1 list and it doesn't matter who comes into the list as long as they have rights.  I will be keeping this for the future when I do care who comes into the forms, like the HR forms, that are coming soon...

In this case:

1) The manager(or anyone else with rights to the list) fills in 6 columns to request something.

2) FLOW sends an alert to a member of the IT team that needs to implement the change in the system by entering his name, date and any comments

3) SA double checks the change and fills in 3 columns to complete the process.

@Pstork1 solution is perfect as long as I can figure out how to tell the "On Save" which form to save 🙂

Thanks again!

Joe

[Pstork1]

There is a TIP in the article I sent you that explains:

Set different values for a variable in the OnNew, OnView, and OnEdit formulas. You can use this variable in the OnSave formula to determine which form is being used.

So in the OnNew or OnEdit set a variable that specifies the form being used.  Then put an IF() in the OnSave to submit the appropriate form based on the value of the variable.

[joef]

Hi @Pstork1 ,

I accepted as solution too soon 🙂

I just published this and when I add a new item the new form shows as expected.

I then went back to my list and tried to edit an item and I get the new form again.  

What am I missing?

On New I added NewForm(QTYAdjustmentNew);Set(VarNewForm,true)

On Edit I added  EditForm(QTYAdjustmentEditIT);Set(VarEditForm,true)

On save I added If(VarNewForm = true,SubmitForm(QTYAdjustmentNew),SubmitForm(QTYAdjustmentEditIT)

Thanks again,

Joe

[Pstork1]

I think you missed another one of the notes

• Make sure to include RequestHide() in the OnSuccess formula of all your forms. If you forget this, SharePoint will not know when to hide the form.

You have to show and hide the forms or you'll always see the last form you used.  You used the New form, but I suspect you didn't hide it when you were done, so you got it again when you did Edit.

[joef]

Hi @Pstork1 ,

If I am editing an existing item, the edit form should open not the new.  I wasn't in the form to hide or show....

The default was set when the app was created as  "On success" ResetForm(QTYAdjustmentEditIT); RequestHide()

Also with the IF() in my save the save button does nothing when I try to add a new item.

Thanks again 🙂

[Pstork1]

Are you just using 3 forms on the same screen?  Or 3 forms on seperate screens with Navigate statements in the OnNew and OnSave?  I just built out a POC using the article and it works fine for me.  Here are the formulas I'm using in OnNew, OnEdit, and OnSave.

onNew
Navigate(NewScreen1,ScreenTransition.Fade);NewForm(NewForm1);Set(showForm,"New")

onEdit
Navigate(EditScreen1,ScreenTransition.Fade); EditForm(EditForm1);Set(showForm,"Edit")

onSave
If(showForm="New", SubmitForm(NewForm1),SubmitForm(EditForm1))