Building input screen from scratch without form control

[darylvogan]

For certain reasons, I need to build an app where we don't want to use the built-in Form control. Once started I've quickly realized how much of the mundane logic that the form and card controls took care of. Is there a good tutorial or pattern & practice for how to cleanly replicate that?

[Devvj]

Best thing is to just be consistent, name labels and fields properly, it will help a ton further down the road to have proper naming, it is alittle tedious but worth it.

[Chris-D]

I never use the form control. It's too restrictive. 

I always make my own UI, apart from nicer looking visually, I can do things like realtime validation, multi page forms and a few other things that you can't do with the built in forms. 

[jadhav_ravi_oo7]

By using containers, in container your text inputs or anything that you want, you can do it easily and after that copy and paste or you can use from controls filed directly...

Thanks & Regards,

Ravindra Jadhav

Independent Consultant | Freelancer 

Connect Me On Different Platforms

LinkedIn || YouTube ||Blogger ||

[darylvogan]

I'd be interested to hear more, if you wouldn't mind, on how you implement validation. Are you just writing a bunch of IF statements? I want to do it the "PowerApps way" and not over-code it.

[BCBuizer]

Hi @darylvogan, 

What I do in these cases is to use a two global variables: varItem and varFormMode

varItem is used to display a certain item, similar as using the Item property of an EditForm, and varFormMode determines the mode of the form (view or edit), similar to using the ViewForm, NewForm and EditForm functions.

When inserting your input controls, set the DisplayMode property to varFormMode and the Default property to varItem.

Then use your variable to replicate the EditForm behaviour:

NewForm:

Set(varItem, Defaults(DataSourceName));
Set(varFormMode, DisplayMode.Edit);

EditForm:

Set(varItem, LookUp(DataSourceName, <condition>);
Set(varFormMode, DisplayMode.Edit);

 ViewForm:

Set(varItem, LookUp(DataSourceName, <condition>);
Set(varFormMode, DisplayMode.View);

To then save anything to your data source, you need to use Patch for which this is a good video: https://www.youtube.com/watch?v=W8JjF2k0IQA

Since the Patch function returns the record that is saved, you can save that in varItem so your form shows the updated values. For instance an ID field then gets populated, based on the assigned value in the data source:

Set(varItem, Patch(<...>));
Set(varFormMode, DisplayMode.View);

[darylvogan]

Thanks. I have lot of experience using Patch for non-form stuff. Appreciate the pointers though.

[Chris-D]

I'm from a development background and am not so good at "the PowerApps way" as you call it, sounds like you might be too! 

For realtime validation I use a timer set to something like 100ms so it's not too CPU intensive. The timer checks each input, validates however you like (I usually use regex) and set a variable. 

e.g.

// Validate number field cannot be blank
UpdateContext({ MyInputValid: IsMatch( TextInput.Text, "\d+")});

Then you can use your MyInputValid variable in other places. I use it to change border colour if invalid, and to disable the form submit button. 

For multipage forms I pass the data from the fields in this screen as a record to the next screen in navigate function:

Naviagte( Screen2, CoverRight, { MyNumber: Value( TextInput.Text)});

[darylvogan]

Thanks. I don't need real-time validation, I'll rely on clicking the save button and if all validations pass, do a Patch. 

[darylvogan]

Am I overthinking it to build a component that acts as a DataCard? This can hold the required property and be referred to by its child controls and perform other purposes.