Solved: Help with Display Mode

SamB2 · ‎08-01-2023

I have a PowerApps form where I have two buttons at the bottom (1. Save as Draft & 2. Submit). The only required field I have is Title in order for a user to be able to save the form as draft.

The OnSelect property on the Save as Draft button is as follows:

If(SharePointForm1.Valid, UpdateContext({locIsSubmit: false}); SubmitForm(SharePointForm1); Notify("Form Saved Successfully",NotificationType.Success); Navigate('Previous Submissions'), Notify("Unable to save form. Please ensure 'Title' has been populated and try again.", NotificationType.Error))

The above works fine. My issue is with the Submit button. To be able to Submit the form, all fields in the form are mandatory which I have also got working by adding "locIsSubmit" into the required property of each field.

However, I would like to make the display mode of the Submit button disabled until all fields on the form are populated. If I use this expression "If(SharePointForm1.Valid, DisplayMode.Edit, DisplayMode.Disabled)" the submit button becomes clickable as soon as the Title field is populated.

I would also like to Navigate to the "Success Screen" when the form has been submitted successfully. However currently, the form is navigating the success screen regardless of whether the form is valid or not.

Any help would be much appreciated!

madlad · ‎08-02-2023

@SamB2

I think I see what you mean with your form validation now. locIsSubmit is being changed to determine the validation when the Save Draft button is submitted, right? I think there's two things you want to do here.

1. Make sure locIsSubmit is set to true by default - likely in this screen's OnVisible.

2. Change the save draft code to set it to false before the if function - something like:

UpdateContext({locIsSubmit: false});
If(
  SharePointForm1.Valid,
  SubmitForm(SharePointForm1);
  Notify("Form Saved Successfully",NotificationType.Success);,
  Notify("Unable to save form. Please ensure 'Title' has been populated and try again.", 
  NotificationType.Error)
)

As this will ensure that the Save Draft button is only checking for the validation of the title field.

For navigating to the success screen - if you only want it to happen when they press the submit button, perhaps in the form's onSuccess, use the exact same if function as in the Submit buttons display mode - just replace "DisplayMode.Edit" with "Navigate(Success Screen)", and replace DisplayMode.Disabled with "Navigate('Previous Submissions')".

If none of this works, another option(although its a bit more inconvenient)

The easiest(but much longer) way to solve this in my opinion is, since the validation of the form is being based on only the title field most likely, you could try set it to something like:

If(
  !IsBlank(*TitleField*.Text) &&
  !IsBlank(*DatePicker1*.SelectedDate) &&
  !IsBlank(DatePicker2*.SelectedDate) &&
  !IsBlank(*WGCField*.Text) &&
  !IsEmpty(*AttachmentsField*.Attachments) &&
  ect.,
  DisplayMode.Edit,
  DisplayMode.Disabled
)

Using something like this as your forms visibility and including all mandatory fields is a bit longer, but its a bit more clearly displayed for troubleshooting. Just make sure to put in appropriate control names.

View solution in original post

madlad · ‎08-01-2023

Do you have all fields set as required?

Every data card in a form has a property(visible in advanced settings) named 'Required'; which is based on the datasource by default, but can be manually changed.

Even if they do somehow try to submit the form with not all required fields full, it will throw an error instead of submitting.

For each datacard, change the required to true and this should have the effect you want.

For your navigation, a safe bet is to have it in the forms 'OnSuccess' property.

Another thing you can do, since for saving you only need Title populated, is manually check the values of specific controls within a form - but this takes up quite a bit more space, but it's useful if you only need some fields to do one action, but need different ones for another.

Hope this helps!

SamB2 · ‎08-01-2023

Hi @madlad - thanks for the response.

The only field set as required is Title. If I set all fields to required, then users will not be able to Save the form as draft (hence why I have created the 'locIsSubmit' variable).

Again with the OnSuccess property, I have tried this and users are getting directed to the Success Page when they are Saving the form as draft.

madlad · ‎08-01-2023

I think the reason for the onsuccess property changing screens is because you're submitting the form in your save button - since only title is required to be valid, it's submitting the form.

SamB2 · ‎08-01-2023

Yes that is exactly the reason, hence why I have created the "locIsSubmit" variable that sets the Status Column to either draft or submitted depending on whether Save as Draft or Submit is pressed respectively.

Therefore, simply Navigating to the Success Screen 'OnSuccess' of the form won't work in this instance. I need to find a way to navigate to the success screen only if Submit is pressed. (Save still submits the form and creates an item in the SharePoint list but leaves the Status set as Draft).

I also need to find a way for the Submit button to only be DisplayMode.Edit when ALL fields are complete, despite only the Title field being required (which works for the Save as draft button).

Faisal__Wasim · ‎08-01-2023

Hi @SamB2 ,

I believe that because you're using the navigate on the "OnSuccess" property of form, it will always go to the success screen because even draft submission is success for the form.

What you can do is remove the navigate code from "OnSuccess" and use only in the Submit button.

2nd for the problem where you have to disable the button until all fields are filled,

you can make all the fields requried by passing your variable "locIsSubmit" in them, whenever the draft button will be pressed they all will be false and Title will be added, and when the Submit button will be pressed, at the start you can make this variable true UpdateContext({locIsSubmit: false}); SubmitForm(SharePointForm1); so it will not submit until all fields are filled, and then you can pass the following code in buttons DisplayMode property:

If(SharePointForm1.Valid,DisplayMode.Edit,DisplayMode.Disabled)

Do let me know if you see any challenges, I am always happy to help.

Regards,
Faisal

if this reply/solution works Mark it as the solution and give a thumbs-up.

SamB2 · ‎08-02-2023

Thanks @Faisal__Wasim .

Re the second point. This is exactly what I have done. This works fine when form is in Edit mode, however when in New form mode, it only thinks the Title field is required despite me setting the Required property as "locIsSubmit" on all other fields. So even though it doesn't let me submit in New Form mode with just the title populated, the Submit button instantly becomes enabled when the title field is populated.

Faisal__Wasim · ‎08-02-2023

Hi @SamB2,

I believe if I understand it right, you want to use the submit button to submit new entries well right ?
If yes, on the Submit Buttons onselect, are you updating the variable to true at the start?
Thanks let me know

SamB2 · ‎08-02-2023

Yes that is correct, it is a long form so the idea is that a user can Save a form as draft with as many of the fields blank (except from the title), and then when all fields are populated, they can hit Submit which will submit the form.

The OnSelect property of the Submit button is as per below:

UpdateContext({locIsSubmit: true}); SubmitForm(SharePointForm1);

As you can see from below screenshot, the Submit button is in 'Edit' display mode despite the fields above it being blank (and Title is populated):