Form header colour!

[Madimant]

I am trying to setup a form with a different header colours depending on a flag in the form data but I'm not good enough in scripting to work it out.

I have a BO form with some user data and a rule to check the data integrity that then sets a BO.AuditFlag = 'Yes" or "No" dependant on data integrity.
If the AuditFlag = "Yes" then want to have the Form Header color GREEN and if it is "No" then RED to alert the user.

Any help will be appreciated.

Tj

[Jaymer]

working on this now for you...
but its going to involve the grid "custom header"

Have you seen this in the CRM sample?

[Madimant]

Thanks Jaymer...

[Jaymer]

ok, thats not true. cause thats a grid header.
so ignore that post above.

[Jaymer]

consider this from the CRM sample app.
the title "Jane Allison" comes from a custom header on the form.

the Customer form

[Jaymer]

In the config tool, here's the default custom header, AND a modified one to make it RED

Default

Screen Shot 2020-12-16 at 10.26.19 AM.png (135.75 KiB) Viewed 6588 times

Modified Code

Screen Shot 2020-12-16 at 10.27.57 AM.png (60.17 KiB) Viewed 6588 times

Result

Screen Shot 2020-12-16 at 10.26.54 AM.png (55.67 KiB) Viewed 6588 times

[Madimant]

If you see this header... the last word shows 'OK!' and the Banner is Green


And in this one the Error code is 'CC | IN | RI' and the colour is Red


I can hard code it in CSS with two different classes but just don't know how to select the relevant class and apply to the <div class=".vc-benefit-error"> or <div class=".vc-benefit-error"> when the flag changes from 'OK!'

The CSS will give me the two states

Custom CSS
.vc-benefit-error .k-state-selected {
background-color: #c13064;
color: #EEE;
}

.vc-benefit-ok .k-state-selected {
background-color: #30a5c1;
color: #EEE;
}

[Madimant]

Sorry, my screenshots not working...
Pictures in attachments

In essence looking a 'If' type statement

if BO.AuditError = 'OK' then "formheader class=vc-benefit-ok"
else if BO.AuditError <> 'OK' then "formheader class=vc-benefit-error"

if that makes sense.

Thanks Jaymar

[Jaymer]

yes, perfect.
so, here's a trick (shown to me long time ago by Mark B)

here's my form.
notice the last name.
its the name of the CSS class I want to use (in your case, the "error" or "ok" class)

Screen Shot 2020-12-16 at 11.01.48 AM.png (50.52 KiB) Viewed 6571 times

And the new Custom Header

Screen Shot 2020-12-16 at 11.02.14 AM.png (45.82 KiB) Viewed 6571 times

[Jaymer]

So...

add a field to the BO
set a rule to set the color field to either "xxx-error" or "xxx-ok"
and then just use the color field as the merge field <<Customer.color>>

The rule will always set it to one or the other.
Worse case is the class value doesn't exactly match a valid class, in which case it doesn't throw an error, it just doesn't color the field.

[Jaymer]

Also "k.state-selected" isn't doing anything in this context

And the CRM example used inline-styling a lot - better to have it like you do ALL in the CSS

And to make a shorter field, although 5 bytes vs. 16 bytes isn't going to make a diff,
but i'd probably use
.vc1 & .vc2 ( or maybe .vcok & .vcbad)
and just comment it in the .css

[Jaymer]

oh, and thx for getting rid of that screaming baby (or whatever it was) as your avatar - that thing always freaked me out!

[hpl123]

You can also use something like this (in the header HTML):
<<IF BO.AuditError = 'OK' THEN SHOW SECTION_START>>
// Show this
<<SECTION_END>>
<<IF BO.AuditError <> 'OK' THEN SHOW SECTION_START>>
// Show that
<<SECTION_END>>

[Madimant]

Thank you Jaymar and Hendrik...

That will work for me. Needed the method to get the Attribute into a CSS class.

And sorry Jaymar about the 'screaming baby' . Was actually a very frustrated little girl ripping of her swimming goggles and say ' Enough of this S...'

Tj