Another border.fill.color.value question

[Former Community Member]

I am trying to script an if statement to define the background value depending on the instanceIndex of a subform.  I have tried it in the click event of the addButton and the indexChange event of the subform.  I saw an example of exactly what I am trying to do, but for the life of me I cannot locate it now.  I have searched both this forum and the users forum and I know it was in one of them.  Anyway, here is what the script looks like:

----- form1.Main_Subform.AdditionalAssaysSubform::indexChange: - (JavaScript, both) ----------------

if

(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "0") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "240,240,240";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "2") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "240,240,240";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "4") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "240,240,240";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "6") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "240,240,240";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "8") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "240,240,240";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "240,240,240";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "1") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "255,255,255";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "3") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "255,255,255";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "5") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "255,255,255";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "7") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "255,255,255";

}

else

if(form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "9") {

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg.border.fill.color.value

= "255,255,255";

form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement.border.fill.color.value

= "255,255,255";

}

I have also tried to use the or ( | ) and combine the if's.  My question is... Am I using the correct event; am I placing the conditional statement in the appropriate place; or am I out in left field again?  Any suggestions would be very appreciated.  Thanks in advance. -rpeterson

[Niall_O_Donovan]

Hi,

You are changing the fill colour of different objects (dropdown, numeric, text(?)), so the script accessing the ui properties will be different. Try checking that you have set the fill of these objects to "solid" and "white" in the object / field tab. The script (from John Brinkman's blog I think, and JP Terry's LC book) that works for all fields.

I have put this in a function (in a script variable called colourControls), which uses the fully qualified reference for the object:

function fieldLoseFocus(fieldObj)
{
    try {
        var fld  = null;
        var noBorder = false;
        fld = fieldObj.ui.resolveNode("#textEdit");
        if (fld != null){
            noBorder = true;
        }else
            fld = fieldObj.ui.resolveNode("#checkButton");
       
        if (fld == null)
            fld = fieldObj.ui.resolveNode("#numericEdit");

        if (fld == null)
            fld = fieldObj.ui.resolveNode("#choiceList");
   
        if (fld != null){
            fld.border.presence = "visible";
   
            if (noBorder)
                fld.border.edge.presence = "visible";
   
            fld.border.fill.color.value = fieldValue.value; // I am using a global variable here...
        }
       
        if (fld == null)
            fld = fieldObj.ui.resolveNode("#dateTimeEdit");

        if (fld != null){
            fld.border.presence = "visible";

            if (noBorder)
                fld.border.edge.presence = "visible";

            fld.border.fill.color.value = fieldValue.value;
        }
    }catch (oErr){
        app.alert("Exception in Highlight: " +   "FormElem:  " + formElem  + " : " +   oErr.name + " - " + oErr.message);
      }
}

You can see that the script loops through working out what the object is and then accesses the appropriate .ui property #textEdit, #numericEdit, etc.

My script is then in the enter and exit events:

var vName = this.somExpression;
var fieldObj = xfa.resolveNode(vName);

colourControls.fieldLoseFocus(fieldObj);

If you were to use the function, your if statement might look like this:

if (form1.Main_Subform.AdditionalAssaysSubform.instanceIndex == "2") {

colourControls.fieldLoseFocus("form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDropdown", "240,240,240");

colourControls.fieldLoseFocus("form1.Main_Subform.AdditionalAssaysSubform.AddedAssaysDataTable", "240,240,240");

colourControls.fieldLoseFocus("form1.Main_Subform.AdditionalAssaysSubform.AddedAssayAvgNeg", "240,240,240");

colourControls.fieldLoseFocus("form1.Main_Subform.AdditionalAssaysSubform.AddedAssayDisplacement", "240,240,240");

}

The function would look like:

function fieldLoseFocus(fieldObj, fieldValue)

This might (probably will) need some adjustment, but the main message is that to change the background fill colour you need to access the .ui property for that field. You can script this for each field individually (search for #textEdit in the forum), but the function automates this.

Good luck,

N.

[Former Community Member · Accepted solution]

Hi Renee,

Here is an example highlighting the background color of the fields nested inside a repeating subform based on the index of the repeating subform. The background color will not change on enter/exit of the fields but will create a color pattern similar to tables' row shading.

This JavaScript script lives in the indexChange event of the repeating subform AdditionalAssaysSubform.

var nIndex = this.instanceIndex;
var nColor;

if (nIndex % 2 == 0)
    nColor = "240,240,240";
else
    nColor = "255,255,255";

// Use the following if you want to change the object background color
AddedAssaysDropdown.border.fill.color.value = nColor;
AddedAssaysDataTable.border.fill.color.value = nColor;
AddedAssayAvgNeg.border.fill.color.value = nColor;
AddedAssayDisplacement.border.fill.color.value = nColor;

// Or the following if you want to change the widget background color
//AddedAssaysDropdown.ui.oneOfChild.border.fill.color.value = nColor;
//AddedAssaysDataTable.ui.oneOfChild.border.fill.color.value = nColor;
//AddedAssayAvgNeg.ui.oneOfChild.border.fill.color.value = nColor;
//AddedAssayDisplacement.ui.oneOfChild.border.fill.color.value = nColor;

Cheers

Hélène

[Former Community Member]

Hélène,

Thank you sooo much.  It works beautifully.  The fix was so very simple seeming.  Obviously I am still on the very steep learning curve for scripting and use this forum religiously to answer my questions (mainly through research).

I just want to add to Niall, though, that I really appreciate your help.  But, it was way over my head at the moment, but I saved your attachment and will study it, along with the LC book by Terry that you recommended.

Thanks again. -rpeterson

[Yasser__AST-IT_]

Hi,

Thank you for your post, it was indeed very helpful.

Another question, how can I script the change of the fill property of non-interactive objects such as circle or rectangle objects.

For example, how some could change the fill type (i.e., solid, linear, radial, etc...) start color and end color, border colors, etc...

And where I can find more examples or reading material (with example) of referencing all the objects in XFA (especially the #ui stuff).

I have attached one document that I'm usually referencing and it talks about Circle objects, but  it seems it's very old and outdated and the examples for Circle object is not working with me, for sure, dose not cover the latest XFA sepcs.

I'm using Adobe LC Designer ES 8.2.x and Adobe Acrobat/Reader 9.2.

Appreciate your help...

BR,

Yasser

[Former Community Member]

Hello Yasser,

Let's start with reading material. In Designer's Help menu, there is a link to the Adobe LiveCycle Developer Center website where you'll find lots of documentation. Have a look at

- LiveCycle Designer ES Scripting Reference (version 8.2)

- XML Forms Architecture (XFA) specification version 3.0 (this link will bring you to a page where all the xfa spec are listed. Choose the version 2.8 for Designer ES 8.2)

As for your question. Changing the fill type will not be easy. Depends on the fill types, some need new xfa grammar. Do you have a specific scenario you are thinking about? Are you familiar with the XML Source?

Hélène

[Yasser__AST-IT_]

Hi Hélène,

Many thanks for your answers...I started going through the links and reading the stuff. I've gone through the LC Designer Scripting Reference on the previous versions, looking at the 8.2 version of the reference, it seems they have the same issue of not sufficient examples/explanations on how to access non-common features/properties. 

The problem I'm facing is I think in understanding the grammer of XFA and referencing in some special cases such as dealing with non-interactive objects.

The case I'm trying to implement is as following: In our form, there will be visual indicators(3 circles - it's like traffic light) that will show the status of specific section of the form. The circles will be by default set filled by gray color, and depending on the values collected from the section's fields (based on certain logic) one of the circles will be filled by either Red, Yellow, or Green color.

Currently, I'm using two objects (on top of each others) for each circle (one filled with gray and the other one is filled with, for example, green color), and using presence to hide and unhidden the required "colored" objects. But as you can see, this method is not the best and having access to the object's visual properties is better coding practice (I assume)

I'm hoping to get the required assistance on the "how to" from this forum...

:-)

BR,

Yasser

[Former Community Member]

Hi Yasser,

Great thanks for the additional information. The script you are looking for will look something like so:

Circle1.value.arc.fill.color.value  = "0,255,0";

You can adapt it to your form’s logic to determine which color to use.

Let me explain how I came up with the script.

1. Start a new form.
2. Place a button and a circle on the body page.
3. Select the circle, go to the Object palette | Draw tab, set the Fill property to Solid, and pick a gray color.
4. Leave the circle selected and go to the XML Source tab. The line starting with the <draw> tag will be highlighted. This is the starting point of the circle's definition. It will look something like so:

     <draw name="Circle1" y="15.875mm" x="82.55mm" w="25.4mm" h="25.4mm">

       <value>

         <arc hand="right">

          <fill>

            <color value="128,128,128"/>

          </fill>

        </arc>

      </value>

      <para vAlign="middle" hAlign="center"/>

     </draw>

    5. Find the property setting the fill color, in this case it’s draw.value.arc.fill.color.

    6. Return to the Design View and select the button.
    7. Go to the Script Editor and select the click event.
    8. We need a JavaScript script that will change the color property to green. Remember where the color property lived in the XML Source. Let’s try:

Circle1.value.arc.fill.color.value  = "0,255,0";

    9. Preview the form (make sure it’s a dynamic PDF).
    10. Click the button and voilà – green!

This is how I’ve learned the xfa grammar. I set the property in Designer, and then look for it in the XML Source. I often refer to the XFA Spec for more information about the property e.g. which value can I set it to. I like to go to the Part2: XFA Grammar Specifications > template specification > Template Reference section for that. Note that you want to be careful in the XML Source, changing the information incorreclty  may break your form. It’s always a good idea to make a backup copy of your form frequently.

Hope this helps,

Hélène