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.

Jaymer

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

Have you seen this in the CRM sample?

Screen Shot 2020-12-16 at 10.11.48 AM.png

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

Screen Shot 2020-12-16 at 10.18.59 AM.png

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

Modified Code
Screen Shot 2020-12-16 at 10.27.57 AM.png

Result
Screen Shot 2020-12-16 at 10.26.54 AM.png

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

And the new Custom Header
Screen Shot 2020-12-16 at 11.02.14 AM.png

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...'