3 Replies Latest reply: Mar 5, 2013 9:40 AM by Nattu RSS

    Apex Page Input Item Label Conditional Style at run time

    Nattu
      Hi,

      Apex version 4.2.1.00.08

      We have an issue after migrating to apex 4.2.1. We have a select list and use another couple of dummy items to be used as its label instead of giving the text value to the LABEL control. Only one of the dummy items is shown as a label for the select list conditionally based on another value. It was working fine with the earlier versions upto 4.1, but with the introduction of grid in 4.2, its now displaying the select list on a new row (ie the lable in one row and the select list on the next row).

      However, we really would like to solve this by having a way to display the label of the select list either in "required format style" or as an "optional style". The display style should be determined only at runtime.

      Example. Say P100_MY_SELECT_LIST is the select list

      The label for this item is "My Select List Label"

      I have another dummy item P100_DUMMY

      if P100_dummy = 1 then the label "My Select List Label" should be displayed in red and with an *
      *My Select List Label
      Otherwise it should be in black and without *
      My Select List Label
      Please help how to do this.

      Thanks in advance.

      Regards,

      Natarajan
        • 1. Re: Apex Page Input Item Label Conditional Style at run time
          Joe Upshaw
          Ok. This is not going to be fun...The following is ugly, violates MVC boundaries and, in general, I am not proud of it...but, it works.

          I had to do something very similar by making a label within a row of a report appear "Required" if another, hidden column specified that it was required. I had to do this with JavaScript.
          ...
              var redAsterix = ' <font color="red" size="3">*</font>';
          ...
              // Get a jQuery reference to the rows in the table. Make a loop over them.
              $(propertyInstanceRows).each(
              function(index) 
              { 
          ...
                  // On each row, check the optionality and if required, make the label look required
                  optionality = $(this).find('td[headers="OPTIONALITY"]').text();
                  
                  if( optionality === 'REQUIRED')
                  {
                      propertyName = $(this).find('td[headers="PROPERTY_NAME"]');
                      $(propertyName).css('font-weight', 'bold');
                      $(propertyName).html( $(propertyName).html() + redAsterix );
                  }            
                                
              });  
          -Joe
          • 2. Re: Apex Page Input Item Label Conditional Style at run time
            Nattu
            Well, I deviated with the various other things, and finally needed to get it fixed now. I find my own solution by having a Label Template which creates an ID for every label of the input item and calling a couple of javascript functions thro dynamic action.

            1) Create a label template "FormFieldDynamic" as follows

            In the template definition "Before Label"
            <img src="#IMAGE_PREFIX#requiredicon_status2.gif" alt="Required Field Icon" /><label for="#CURRENT_ITEM_NAME#" id="#CURRENT_ITEM_NAME#_LABEL" tabindex="999" class="itemLabel">
            in the "after label"
            </label>
            Note, I am having the image for the * always with the laebl and creating an ID for the label with id="#CURRENT_ITEM_NAME#_LABEL" .


            I have created a couple of javascript function to show the label dynamically as required or optional.
            function setLabelRqd(item) {
                 var v = item+'_LABEL';
                 var pid = document.getElementById(v);
                 if (!((pid===null)||(pid===undefined))){
                      pid.style.color = "red";
                      $('#'+v).prev().show();
                 }
            }
            
            function setLabelOpt(item) {
                 var v = item+'_LABEL';
                 var pid = document.getElementById(v);
                 if (!((pid===null)||(pid===undefined))){
                      pid.style.color = "black";
                      $('#'+v).prev().hide();
                 }
            }
            Use the template if the input item (label) is dynamically set as Required or Optional at runtime based on a value of another item.

            How to:
            1.     Select the template FormFieldDynamic for the input item.
            
            2.    Create a dynamic action triggering on the change event of the page item which holds the conditional value to set the input item label as required or as optional.
            
            Under the When Section
            
            a.     Event => Change
            
            b.    Selection Type => Item(s)
            
            c.     Item(s) => PXXX_ITEM_NAME (The item that holds the conditional value to set the label for the input item
            
            d.    Condition => equal to
            
            e.     Value => Enter the value  for which the label needs to be displayed in Required format.
            
            f.     Set True Action
            
                                                                      i.    Action => Execute Javascript Code  (Identification)
            
                                                                     ii.    Fire on Page Load => checked (Execution Option)
            
                                                                   iii.    Code => setLabelRqd(‘PXXX_ITEM_NAME’);  (Settings)  /*Call the javascript function to set the label as required*/
            
                                                                    iv.    Selection Type => Item(s) (Affected Elements)
            
                                                                     v.    Item(s) => PXXX_INPUT_ITEM1[,PXXX_INPUT_ITEM2]…
            
            g.     Set False Action
            
                                                                      i.    Action => Execute Javascript Code  (Identification)
            
                                                                     ii.    Fire on Page Load => checked (Execution Option)
            
                                                                   iii.    Code => setLabelOpt(‘PXXX_ITEM_NAME’);  (Settings) /*Call the javascript function to set the label as optional*/
            
                                                                    iv.    Selection Type => Item(s) (Affected Elements)
            
                                                                     v.    Item(s) => PXXX_INPUT_ITEM1[,PXXX_INPUT_ITEM2]…
            It finally works for me :) and hope this will be helpful to others too. I will greatly appreciate anyone to mention it here if this helps for him.

            Thanks,

            Natarajan
            • 3. Re: Apex Page Input Item Label Conditional Style at run time
              Nattu
              Thanks Joe for your response, I got it working somehow in my own way :).