AngelaIp / aras-add-color-to-impact-matrix

This project demonstrates some simple ways to improve visibility and coloring in Aras.
Microsoft Public License
1 stars 0 forks source link

Color added to part grid - inconsistent rendering in grid/form #3

Closed sachinbijadi closed 5 years ago

sachinbijadi commented 5 years ago

image @AngelaIp , In some forms (innovator running on Firefox) the state field in the part form has color (like above), and in some other it doesn't (check below). Any idea why? Is it possible to make it colored for all states in the state field on the form? I think that would be a brilliant feature (not sure if that was intended with your code, or if that is a bug) I am using a custom css external style sheet (one available on the community by ELi Donahue Also some time in the BOM some parts dont have state colored for some reason? image

image

image

AngelaIp commented 5 years ago

I am really happy to see somebody else who plays around with the existing community projects (and even found my little area of rejected projects...). I also made some tries with the css sample, but I will wait for the next Aras update until I do more here (SP11 that does a lot of stuff different..).

Regarding your question: I use a different version where you can choose if you want to have additonal coloring of the state property in the Form by yourself. In our environment this version works well for IE, FF and Chrome. Will try to provide more information this week.

sachinbijadi commented 5 years ago

Hey @AngelaIp ! I decided to develop a workaround for this myself by creating a new HTML field in the Part form that kinda works like the html state field in Express ECO. I used a method to load the itemStateValue, and then added the JS script in the html field with if else conditions for the various states. I have a feeling this is not what a coder would recommend performance-wise, but I tried out a bunch of ways to alter the coloring of the html field by pointing to an external css, but couldn't get it to work until a used the if else condition in drawing the html field itself. Would greatly appreciate if you have suggestions/ sample code to do this in a better way.

Method to load the item state value (copied ditto from Express ECO form)

//debugger;
var itemStateValue = document.thisItem.getProperty("state","--");
var info = window.getItemStateInnerHTML(itemStateValue);
document.getElementById("ITEM_STATE_INTERNAL_SPAN").innerHTML = info;
return;

And teh code in the html field in the part form:

<!--Uses the method "Express FIll Item State"-->
<span id="ITEM_STATE_INTERNAL_SPAN" class="state_field" style="display:block;"></span>
<script> 
    window.getItemStateInnerHTML = function(itemStateValue)
    {   
        if (itemStateValue == "Released"){
            var tableHTML = '<table width="148" id="item_status" border="0" bgcolor="#9FF19F" empty-cells:show; style="border-color:lightgrey; border-width:1pt; border-radius:3pt; " >';// light green
            tableHTML += '<tr height="28" valign="center" >';
            tableHTML += '<td align="center" style="font-size:10pt; color: #565756;">'; 
            tableHTML += itemStateValue;
            tableHTML += '</td></tr></table>'   
        }
        if (itemStateValue == "Preliminary" || itemStateValue == "In Change" || itemStateValue == "In Review"){
            var tableHTML = '<table width="148" id="item_status" border="0" bgcolor="#FFFFBB" empty-cells:show; style="border-color:lightgrey; border-width:1pt; border-radius:3pt; " >';// light yellow
            tableHTML += '<tr height="28" valign="center" >';
            tableHTML += '<td align="center" style="font-size:10pt; color: #565756">'; 
            tableHTML += itemStateValue;
            tableHTML += '</td></tr></table>'   
        }
        if (itemStateValue == "Superseded" || itemStateValue == "Obsolete"){
            var tableHTML = '<table width="148" id="item_status" border="0" bgcolor="#FFBBBB" empty-cells:show; style="border-color:lightgrey; border-width:1pt; border-radius:3pt; " >';//light red
            tableHTML += '<tr height="28" valign="center" >';
            tableHTML += '<td align="center" style="font-size:10pt; color: #565756">'; 
            tableHTML += itemStateValue;
            tableHTML += '</td></tr></table>'   
        }
        return tableHTML;
    }
</script>

image

AngelaIp commented 5 years ago

Wow, you really on fire for this coloring stuff! Actually turned out, that coloring Form fields is the only use case, were I still use a VB version of this Method, as I wasn´t able to solve it with CSharp. In fact it´s the only VB Method that I use at all. A vbnewline will also trigger Form coloring. Do not ask me why, but it worked in my environment and also for all browsers. Also it will not work for dropdowns...

You can try this sample in VB. I didn´t clean the sample, it´s just for demonstration. So only use it in a test environment!

Dim inn As Innovator = Me.getInnovator()
Dim i As Integer

For i=0 To Me.getItemCount()-1

  Dim bg_color_state As String
  Dim bg_color_makeBuy As String
  Dim myCss As String
  Dim text_color As String = "#000000" 
  Dim thisItem As Item = Me.getItemByIndex(i)
  'Choose color for 'State'
  Dim thisStatus As String = thisItem.getProperty("state","")
  Dim isCurrent As String  = thisItem.getProperty("is_current","")
    '------
      Select (thisStatus)
          Case "Preliminary","In Review","In Change"
          bg_color_state = "#FFFFBB" 'light yellow
          Case "Released" 
          bg_color_state = "#90EE90" 'light green
          Case "Superseded" 
            If isCurrent = "1"
                bg_color_state = "#FFBBBB" 'light red, superseded by other Item
            Else
                bg_color_state = "#bbddff" 'light blue, superseded by revision
            End If
          Case "Obsolete" 
          bg_color_state = "#FFBBBB" 'light red
          Case Else
          bg_color_state = "" 'none
      End Select

  'Choose color for second property
  Dim make_buy As String = thisItem.getProperty("make_buy","")
      Select (make_buy)
          Case "Make"
          bg_color_makeBuy = "#FFFFBB" 'light yellow
          Case "Buy"
          bg_color_makeBuy = "#E9FCB2" 'very soft green
          Case Else
          bg_color_makeBuy = "#E9FCB2" 'very soft green
      End Select

  'Variant #1 - Just color fields in grid, not form
  ' If bg_color_state <> "" Then
  ' myCss = ".state { background-color: " & bg_color_state & " }"+
   '        ".make_buy {color: " & bg_color_makeBuy  & " }"+
   '        ".make_buy {font-weight: bold;}"

  'Variane #2 - Color grid and form, will not work for dropdowns!
   If bg_color_state <> "" Then
   myCss = ".state { background-color: " & bg_color_state & " }"& vbNewLine & ""+
           ".make_buy {color: " & bg_color_makeBuy  & " }" & vbNewLine & ""+
            ".name {color: " & bg_color_makeBuy  & " }" & vbNewLine & ""+
            ".name {font-weight: bold;}" & vbNewLine & ""+
           ".make_buy {font-weight: bold;}"

   thisItem.setProperty("css",myCss)

  End If
Next i
Return Me
sachinbijadi commented 5 years ago

Method works really well thanks! Any reason why you don't typically use VB and prefer C#? I don't really have much idea about theses things.

AngelaIp commented 5 years ago

That´s a good question. I am not a professional programmer and cannot tell you about the pro´s and con´s of C# and VB. In previous jobs I worked with C, C++ and Java. But then decided that I hate to code and switched to hardware developing until I accidentally got the PLM job :-). In my case, C# is more similiar to the languages I used before. For other people it can be more convenient to use VB instead. I have also seen Aras users, that do everything in VB because of company politics.

But when doing programming in Aras you will realize the following: