IMS - Meatball Solution

Mission Statement

Enable users to rapidy update and visualize a field status to affect decision making within an organization.

Table of Contents

Execution

Features

Customizations

Debugging

1. Execution

The IMS - Meatball solution deploys through the site collection's master page. Thus all pages natively run the solution.

The runtime enviornment requires jQuery, specifically Ajax, to function. Most DoD SharePoint environments load jQuery to support other solutions. Please edit the master page to confirm its reference.

2. Features

• All select list values, by default, will be replaced with circles of different colors.
  
  
• A popover appears when you mouse over the circle.
  
  
• The popover displays the column and row name, all available choices for the cell, the currently selected value, the last history change made, and a show more button. Clicking on any choice will update the list and page in real time.
  
  
• Clicking on show more, will open a history panel.
  
  
• It displays all historical changes, and comments made for that particular cell. An input area at the bottom of the history panel allows for custom comments to be made.
  
  
• The history feature allows users to track changes over time, and attach reasons for said change. For example, why the production status shifted from green to yellow. Thus reduces time needed for decisions to be made.

3. Customizations

Table of Contents

Defaults

Example

Colors and Values

Ignore

Text

Disable

• Defaults

  The script will replace text in any select list with a circle of a known color.
  If the text isn't a default value, then a circle of the background color will appear.
  The default values are:

  Text	Color
  Up	Green
  Down	Red
  Degraded	Yellow
  NA	Inherit
  100-90	Green
  89-79	Yellow
  79-10	Red
  <79	Red
  <10	Blue

• Example Customization Code

            
              <script>
                var ims_meatball_hide = false;
                var meatball_debug = false;
                var meatball_ignore = ["Meatball Ignore"];
                var meatball_text = ["Meatball Text"];
                var meatball_override = [
                  {value: "50", color: "#FF69B4"},
                  {value: "40", color: "#900C3F"},
                  {value: "30", color: "#581845"},
                  {value: "20", color: "#FFC300"}
                ]
              </script>
            
          

• Colors and Values

  To add custom values:

  1. Add a script editor to the page, or use one on the page.
  2. Write the following inside the script editor:
     

                     
                       <script>
                           var meatball_override = [
                             { value: "", color: "" },
                             { value: "", color: "" },
                           ];
                       </script>
                     
                   

  3. The values must line up with the custom values. The colors can be words or # code. Color Code can be helpful here.
  4. Example:
     

                   
                   <script>
                     var meatball_override = [
                       { value: "Hi", color: "orange" },
                       { value: "Editor", color: "brown" },
                       { value: "You", color: "black" },
                       { value: "Got", color: "gray" },
                       { value: "This", color: "#ee00ee" },
                     ];
                   </script>
                   
                   

• Ignore Columns

  To set columns to be ignored:

  1. Add a script editor to the page or use one on the page.
  2. Write the following into the script editor

                   
                   <script>
                     var meatball_ignore = [];
                   </script>
                   
                   

  3. Inside of the array, add in the name of the column to be ignored.
  4. Example:
     Column name: "Test Column"
     

                   
                   <script>
                     var meatball_ignore = ["Test Column"];
                   </script>
                   
                   

• Text Columns

  To set columns to display text instead of a meatball:

  1. Add a script editor to the page or use one on the page.
  2. Write the following into the script editor

                   
                   <script>
                     var meatball_text = [];
                   </script>
                   
                   

  3. Inside of the array, add in the name of the column to be ignored.
  4. Example:
     Column name: "Test Column"

                   
                   <script>
                     var meatball_text = ["Test Column"];
                   </script>
                   
                   

• Disable Script

  To disable the script from running:

  1. Add a script editor to the page or use one on the page.
  2. Write the following into the script editor

                   
                   <script>
                     var ims_meatball_hide = true;
                   </script>
                   
                   

4. Debugging

The following should help fix most issues with the script.

1. Check the page's lists. Ensure the proper lists are all select lists.
2. Verify internal and external names for each column. The solution uses the internal column names for information transfer, and the external column name for visual changes.
3. Verify column names haven't been changed. If the external names change, then the values in the customization script will not run correctly.
4. Verify the values in each select column and ensure they match with defaults or overrides. If the colors and values script lacks or contains incorrect values, then the meatballs will revert to inheriting the color from the page. For example, a black page will cause black meatballs.
5. If error persists, then contact the developers.

For Developers

1. Add a script editor to the page or use one on the page.
2. Write the following into the script editor

             
             <script>
               var meatball_debug = true;
             </script>
             
             

   Now, any error will appear on a notification design to remain on the page no matter what.
3. To turn off debug mode, either delete { var meatball_debug = true; } or change it to { var meatball_debug = false }

5. Deployment

To deploy a new version of the meatball solution

1. Download a copy of current meatball
2. Unless changes were made to the start function, copy and paste the start function over the new version's start function (Environmental differences apply)
3. In the meatball init function, this.$popoverBody's padding needs to be adjusted to .5rem (Environmental differences apply)
4. If new idiosyncrasies emerge, please update the documents