Alternating colors in a Dialog 2 repeating field - how to

[MichaelCarroll]

Hi all,

I was showing my client a PO that I am building for them and they asked me if they could get the repeating rows to alternate in color. Sure...

Here is how - if anyone out there is wondering...

Step one: Set a class for each control for that is in your repeating section. I chose "repeatRow1". The reason we are going to do this is that I want to make each control transparent so the row color will shine through from the background.

Step two: Add a new css file reference to the dialog 2 properties CSS section. I have not created this file yet, but I can still add the reference here.

css/dialog2.css

(Please note that if this control is going to be inside a TabbedUI control you will need to add this CSS reference in the CSS properties section there also. )

Step three: Open up a text editor (I use notepad ++) to create the css file that you just referenced.

Once it opens I will do a save as, navigate to the css directory of my A5 working directory, enter dialog2.css as my file name and then save.

Now we can get to the fun part.

Step four: Publish your dialog 2 component and then open it up in firefox. This is key as we are going to be using the firebug plug-in to see what is going on and to apply our edits.

Step five: Click on the firebug icon, make sure that the HTML tab is selected, and then click on the element inspector icon.

Here is a short video clip showing you what I am doing:

http://www.screencast.com/t/UcrsGQnAeV

Step six: Modify the css code to create the repeating rows.

I am using a selector that is looking for parts of the HTML code that was generated by the AlphaFive program.

The id that I need to select for the component that controls the background on the rows is a dynamically generated name. So you have to use the firebug program to see what is being generated. Note if you put your Dialog 2 component inside of a TabbedUI the code will be different than what you will see if you place it inside of a a5w page.

The selector that I am using looks for a div and then an ID just below it. This is why the following css code starts with "div". The id^="" searches for an ID that contains the quoted text.

div[id^="Text I am Looking for"] { css properties }

In my example the snippet looks like this:

div[id^="TBI_PO"]:nth-child(2n) {
background-color: lightgrey !important;
}

The ":nth-child(2n) property is only going to select the first instance of the (div) containing the ID "TBI_PO" and then skip a row (div) and then select the next (div). Which gives us the repeating rows.

Ok here is the video:

http://www.screencast.com/t/B71MkjaxH04

I also use the following snippet to set the properties of the textbox controls on the form with a class of repeatRow1 that I set inside of each textbox property in the Dialog 2 component builder.

.repeatRow1 {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #AEB5D8;
    border-radius: 2px 2px 2px 2px;
    font: 10pt Calibri,Tahoma,Arial;
    outline: medium none;
    padding: 3px;
    vertical-align: middle;
}

Step seven: Correcting a bug

The Dialog 2 component builder allows you to set a "class" for a textbox that is given a lookup property. But when you do the "class" does not show up. Here is the work around:

The textbox sits in a table so our css selector code is going to be just a bit different than the first example:

table[id^="Text I am Looking For"] { css properties }

Here is my code that I used:

table[id^="TBI_PO_185055MBMC.V.R1.PROJECT_NO_A5INSTANCE"] {
    background:  transparent;
}

Again the text is dynamically created so you have to look with firebug to see what you will need for your project.

Video Clip:
http://www.screencast.com/t/BrmFbkDqQ0h

Wrap up: Now we need to save all the css code so that the server and development environments match.

Video Clip:
http://www.screencast.com/t/2hwirRcgg


Hope you enjoy!

[peteconway]

Re: Alternating colors in a Dialog 2 repeating field - how to

Many thanks for this post, greatly appreciated.