How to validate fields on hidden section?

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 18:09:12 GMT

Thanks a lot Chris, I did the same using RI (because of my sub-interfaces)

but unfortunaltely, because of my sub-interfaces, testing all these fields at the top-level is not a good solution.

For 2 fields, it works well, but for 30 fields I have to find another way to do it.

The top-level section does not have to know all these fields of Sections A and B (and neither to have to test it). The top-level section just has to display an error message or not.

RE: How to validate fields on hidden section?

Chris — Tue, 17 Nov 2020 18:05:49 GMT

Here's an updated example, essentially the validations are stored at the top level a!localVariables and reused in both sections:

a!localVariables(
  local!fieldA1,
  local!fieldA2,
  local!fieldB1,
  local!fieldB2,
  local!display: "Section A",
  
  local!sectionAValidations: reject(
    rule!APN_isEmpty,
    {
      if(and(rule!APN_isEmpty(local!fieldA1),rule!APN_isEmpty(local!fieldA2)),"Section A: Enter either field A or field B",null)
    }
  ),
  local!sectionBValidations: reject(
    rule!APN_isEmpty,
    {
      if(rule!APN_isEmpty(local!fieldB1),"Section B: Field B1 is required",null),
      if(rule!APN_isEmpty(local!fieldB2),"Section B: Field B2 is required",null)
    }
  ),
  
  local!validations: reject(
    rule!APN_isEmpty,
    {
      local!sectionAValidations,
      local!sectionBValidations
    }
  ),

  {
    /*top level section*/
    a!sectionLayout(
      label: "Validation Info",
      validations: local!validations
    ),
    
    a!buttonArrayLayout(
      align: "START",
      buttons: {
        a!buttonWidget(
          label: "Section A",
          value: "Section A",
          disabled: local!display="Section A",
          saveInto: local!display
        ),
        a!buttonWidget(
          label: "Section B",
          value: "Section B",
          disabled: local!display="Section B",
          saveInto: local!display
        )
      }
    ),

    a!sectionLayout(
      label: "Section A",
      showWhen: local!display="Section A",
      validations: local!sectionAValidations,
      contents: {
        a!textField(
          label: "Field A1",
          value: local!fieldA1,
          saveInto: local!fieldA1,
          required: rule!APN_isEmpty(local!fieldA2)
        ),
        a!textField(
          label: "Field A2",
          value: local!fieldA2,
          saveInto: local!fieldA2,
          required: rule!APN_isEmpty(local!fieldA1)
        )
      }
    ),
    a!sectionLayout(
      label: "Section B",
      showWhen: local!display="Section B",
      validations: local!sectionBValidations,
      contents: {
        a!textField(
          label: "Field B1",
          value: local!fieldB1,
          saveInto: local!fieldB1,
          required: true
        ),
        a!textField(
          label: "Field B2",
          value: local!fieldB2,
          saveInto: local!fieldB2,
          required: true
        )
      }
    )
  }
)

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 17:43:05 GMT

Thank you Chris, it works great but you don't use the validation of SectionA and SectionB...

I would have love to keep the validation of these 2 sections, as these later are in 2 sub-interfaces.

Is there not any way to reuse the validations and then transmit it (as an object reference) to the main form interface?

RE: How to validate fields on hidden section?

Chris — Tue, 17 Nov 2020 17:23:07 GMT

Try this out:

a!localVariables(
  local!fieldA1,
  local!fieldA2,
  local!fieldB1,
  local!fieldB2,
  local!display: "Section A",
  
  local!sectionAHasValidationError: or(
    rule!APN_isEmpty(local!fieldA1),
    rule!APN_isEmpty(local!fieldA2)
  ),
  local!sectionBHasValidationError: or(
    rule!APN_isEmpty(local!fieldB1),
    rule!APN_isEmpty(local!fieldB2)
  ),
  
  local!validations: reject(
    rule!APN_isEmpty,
    {
      if(local!sectionAHasValidationError,"Error in Section A",null),
      if(local!sectionBHasValidationError,"Error in Section B",null)
    }
  ),

  {
    /*top level section*/
    a!sectionLayout(
      label: "Validation Info",
      validations: local!validations
    ),
    
    a!buttonArrayLayout(
      align: "START",
      buttons: {
        a!buttonWidget(
          label: "Section A",
          value: "Section A",
          disabled: local!display="Section A",
          saveInto: local!display
        ),
        a!buttonWidget(
          label: "Section B",
          value: "Section B",
          disabled: local!display="Section B",
          saveInto: local!display
        )
      }
    ),

    a!sectionLayout(
      label: "Section A",
      showWhen: local!display="Section A",
      contents: {
        a!textField(
          label: "Field A1",
          value: local!fieldA1,
          saveInto: local!fieldA1,
          required: true
        ),
        a!textField(
          label: "Field A2",
          value: local!fieldA2,
          saveInto: local!fieldA2,
          required: true
        )
      }
    ),
    a!sectionLayout(
      label: "Section B",
      showWhen: local!display="Section B",
      contents: {
        a!textField(
          label: "Field B1",
          value: local!fieldB1,
          saveInto: local!fieldB1,
          required: true
        ),
        a!textField(
          label: "Field B2",
          value: local!fieldB2,
          saveInto: local!fieldB2,
          required: true
        )
      }
    )
  }
)

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 17:12:00 GMT

Oh ok, I see...

The only piece I miss, is how to save the result of validations from fields-section to this top level section with this common local var.

Would you have a little example please ?

a!localVariables(
	local!sectionAHasValidationError: null,
	
	// top level section
	a!sectionLayout(
		validations: local!sectionAHasValidationError
	),
	
	// section with error
	a!sectionLayout(
		fieldA,
		fieldB,
		validations: {
		  if(
			and(isnull(fieldA), isnull(fieldB)),
			a!validationMessage(
			  message: "You must enter either a phone number or an email address!",
			  validateAfter: "SUBMIT"
			), /* How to save the validations to  local!sectionAHasValidationError ? */
			{}
		  )
		}
	)
)

RE: How to validate fields on hidden section?

Mike Schmitt — Tue, 17 Nov 2020 16:50:37 GMT

It would just be an extra section layout that always appears at the top of the current form (think of having an information overview header) which stays constant despite which tab the user clicks into. There wouldn't need to be a parent/child relationship (since you're correct in that you can't nest sections at any level).

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 16:48:59 GMT

but how can you have a top level layoutSection ?
(as a sectionLayout can not contain others layoutSection children)

RE: How to validate fields on hidden section?

Mike Schmitt — Tue, 17 Nov 2020 16:32:44 GMT

My first suggestion would be to have a common, informational, top-level section that shows up regardless of which "tab" your user is on.

If not, the solution is still easy: you just duplicate the same validation code across all your sections. Any given section will have a section-level validation showing i.e. "validation error(s) found in Section A", which would be an array showing a similar message for any section(s) currently reading a validatione error (useful if you have very many). The advantage here is that it's not too hard to scale up to handle many sections - the only real up-front lift is coding the local variable determining the individual section's error state, and even then all you're really doing is duplicating the "validations" code from the individual components within that section.

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 16:26:55 GMT

Yes but in that case, if the sectionA is visible, and sectionB hidden (with some fields in error).

I will still have my problem, the submit button will not trigger the validation of the sectionB errors...
Or maybe I'm missing something.

RE: How to validate fields on hidden section?

Mike Schmitt — Tue, 17 Nov 2020 16:23:08 GMT

You'd need to put the validation in one of your SectionLayouts then.

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 16:15:00 GMT

A last thing, how would you do what I need with a headerContentLayout?
(we have no formLayout just a headerContentLayout)

docs.appian.com/.../Header_Layout.html

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 15:36:52 GMT

Ok I understand, thank you Mike.

RE: How to validate fields on hidden section?

Mike Schmitt — Tue, 17 Nov 2020 15:34:53 GMT

[quote userid="50421" url="~/discussions/f/user-interface/19936/how-to-validate-fields-on-hidden-section/77902#77902"]using a formlayout is mandatory in your example[/quote]

For a process task, I'd suggest that using a!formLayout is mandatory in general. That's not strictly true, I guess - you could just use a sectionLayout and manually created button layout... but why would you want to? the FormLayout component just makes things easier.

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 15:31:28 GMT

ok, using a formlayout is mandatory in your example.
I was trying a solution without a formlayout.

RE: How to validate fields on hidden section?

Mike Schmitt — Tue, 17 Nov 2020 15:23:41 GMT

You would set that and similar local variables in the top-level variable declaration of your form. As I already mentioned, the variable will re-evaluate automatically when any of the other data it uses is changed (assuming you're using a!localVariables() under default settings).

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 15:19:12 GMT

Thank you Mike for this idea (I was testing such a one),

but how (where) do you set this var local!SectionAHasValidationError ?

In the SaveInto of each field? (I have more than 30 fields)

Can't we do that once?

(I've tried to do it in the "validations" section, but how? as "a!save" is forbidden)

RE: How to validate fields on hidden section?

cedric02 — Tue, 17 Nov 2020 15:13:35 GMT

Thank you Pedro.
Even if the formLyaout is the better way, I was looking for a solution without it...

RE: How to validate fields on hidden section?

Mike Schmitt — Tue, 17 Nov 2020 15:05:23 GMT

It gets trickier to deal with when you need to do it this way, but after you've implemented it you'll have a lot more power/control at least.

First, you should keep track of the validity of each section (overall) in a local variable. i.e. local!SectionAHasValidationError (boolean), etc. Utilizing a!localVariables() under default settings, you should simply be able to evaluate the validity of your Section A fields with normal logic in the variable definition, and it would update itself anytime any of those values is changed.

Then, as Pedro said above, add a Form Level validation which fires at the Submit event, which itself checks which (if any) of the Section X Validation Error variables is "true", and perhaps advises the user which section has the error - they can then switch back to that section and see the particular validations on the fields themselves.

RE: How to validate fields on hidden section?

Pedro Simões — Tue, 17 Nov 2020 15:00:12 GMT

Hi Cedric,

Please consider handling the validation at form level upon submission. Check the below link

https://docs.appian.com/suite/help/20.3/Validation_Message.html

Regards,

Pedro