Conditional formatting in the Misc HTML header

Forums Dynamic Forms for SharePoint Conditional formatting in the Misc HTML header

Tagged: 

Viewing 10 reply threads
  • Author
    Posts
    • #28225
      Phil Grant
      Participant

      HI,
      I have a field on my form that contains a status and this field is also displayed above the tabs of the form using the HTML section in the ‘Misc’ tab.

      Is it possible to change the background colour of the <td> tag (table cell) based on the value of the status form field?

      I’ve already tried some customJS that I’ve found in some posts that look right but I can’t get it to work.

      Any suggestions?

      Thanks
      Phil

    • #28232
      Alexander Bautz
      Keymaster

      Use something like this in Custom JS:

      jQuery("#dffs_Status select").on("change",function(){
          var bgColor = "white", txtColor = "black";
          switch(jQuery(this).val()){
              case "Not started":
                  bgColor = "red";
                  txtColor = "white";
              break;
              case "In progress":
                  bgColor = "green";
                  txtColor = "white";
              break;
              case "Completed":
                  bgColor = "gray";
                  txtColor = "black";
              break;
          }
          jQuery(this).parents("td:first").css({"background-color":bgColor,"color":txtColor});
      }).trigger("change");

      Replace “Status” with your field name and all the “case” sections to match your options.

      Alexander

    • #28234
      Phil Grant
      Participant

      Do I need to change the

      jQuery("#dffs_Status select").on("change",function(){

      Do I need to change the action form “change” to something like “load” ? as I want the form field to change colour when opened.

    • #28242
      Phil Grant
      Participant

      Alexander,
      This is what I’m trying at the moment, as well as variations on the field name.
      But I can’t seem to get it working.

      
      
      jQuery("#dffs_Golden_x0020_Rules_x0020_Status select").on("load",function(){
          var bgColor = "white", txtColor = "black";
          switch(jQuery(this).val()){
              case "Approval Pending":
                  bgColor = "yellow";
                  txtColor = "white";
              break;
              case "Approval Not Required":
                  bgColor = "green";
                  txtColor = "white";
              break;
              case "Approved":
                  bgColor = "green";
                  txtColor = "black";
              break;
          }
          jQuery(this).parents("td:first").css({"background-color":bgColor,"color":txtColor});
      }).trigger("load");
    • #28244
      Alexander Bautz
      Keymaster

      You are not supposed to change “change” to “load” like you have done – only the field name and the status options in the case.

      Alexander

    • #28248
      Phil Grant
      Participant

      OK but will it set the background colour when the form opens or only when the status changes?

      Phil

    • #28254
      Phil Grant
      Participant

      OK thanks, I’ll give it a try tomorrow.

    • #28275
      Phil Grant
      Participant

      Alexander,
      OK, I couldn’t get that to work no matter what I tried so I found this code

      // Trigger it on page load
      setHeaderColorByStatus();
      // Trigger on change of the status field
      jQuery("#dffs_Status").on("change",function(){
          setHeaderColorByStatus();
      });
      
      function setHeaderColorByStatus(){
          var currentStatus = getFieldValue("Status"), bgc = "white", c = "black";
          switch(currentStatus){
              case "Not started":
                  bgc = "yellow";
              break;
              case "In progress":
                  bgc = "blue";
                  c = "white";
              break;
              case "Completed":
                  bgc = "green";
                  c = "white";
              break;
          }
          jQuery("#dffsHeading_headerOverStatus div").css({
              "background-color":bgc,
              "color":c
          });
      }

      And I now have a header that changes background colour etc. on load and change but when I change the status field the colour changes OK but the text in the instance of {Golden_x0020_Rules_x0020_Status} in the html header doesn’t change to reflect the new choice. I assume this is because it is static once the page is rendered, can I do anything to force an update to that text?
      Cheers,
      Phil

      • This reply was modified 1 month, 1 week ago by Phil Grant.
      • This reply was modified 1 month, 1 week ago by Phil Grant.
      • This reply was modified 1 month, 1 week ago by Phil Grant.
    • #28290
      Alexander Bautz
      Keymaster

      I’m glad you found a working solution. To style the text over the form you must find the ID of this placeholder (right click > inspect) and then add a line in the bottom of your function to target this new id:

      jQuery("#formCustomLabel").css({
        "background-color":bgc,
        "color":c
      });

      Alexander

    • #28292
      Phil Grant
      Participant

      Thanks,
      I figured out how to update the text in the form as well by using jQuery to change the text in the div tag.

      jQuery("#GRS").text("Golden Rules Status - " + currentStatus);

      Quite pleased with the way it worked out in the end.

    • #28296
      Alexander Bautz
      Keymaster

      I’m glad you figured it out.

      Alexander

Viewing 10 reply threads
  • You must be logged in to reply to this topic.