Bulk conditionally color format all object properties in Workshop Object Table

Ask the Community
,
1

I’m trying to create an easy way for users to highlight an entire row in an object table in Workshop with a specific color so they can track their work/flag changes they want to bring up for further review. They’re used to Excel so this is acting as a bridge to a more classic Foundry shaped solution.

Right now I’m using a super hacky method of creating a “highlight” object property, conditionally formatting all the other object properties in OMA to be a certain color if this property is, say “green”, and then allowing the user to change the property’s string value via an action in the front end to trigger the correct color.

The issue is that is not scalable if we need to add more properties or more colors for highlighting purposes. Any tips here on how to do this in a more first class way? Thanks in advance.

1 Like
2

I believe an embedded Slate table could give you more flexibility: the object types would be passed to the embedded Slate app which contains a single table widget. Then using the multi-selection feature, you could select a bunch of rows, apply an action on these selected objects, for instance changing the color property from a selected dropdown value, or even from an html color picker (with <input type="color">) which could be above the table. And the Slate table widget supports html formatting, so you could then format entire rows based on their color property.

Another option would be to have a custom HTML table (with the HTML widget instead) and have the color picker on each row, but that would require more work.

If the embedded Slate is responsive, it would look fine in the parent workshop. For instance, with a table widget named widget-w_table at the root of the Canvas, you could have these styles (mostly the same as the responsive template):

// Utility Classes
// ===============

.u-posFullScreen {
    position : absolute !important;
    top      : 0 !important;
    bottom   : 0 !important;
    left     : 0 !important;
    right    : 0 !important;
}

.u-fluidSize {
    height : auto !important;
    width  : auto !important;
}


// Style Resets
// ============

body {
    min-width: initial;
}

sl-app-canvas {
    
    // Miscellaneous
    overflow : hidden !important;
}

// 
// Expand the Slate document canvas to take up
// the full screen.
// 
sl-app-canvas .canvas-body {
    
    // Position
    .u-posFullScreen();
    
    // Box Model
    .u-fluidSize();
    
    // Miscellaneous
    overflow : hidden !important;
}

// 
// Expand the root table widget to take up the
// full screen.
// 
#widget-w_table {
	
	// Position
	.u-posFullScreen();
	
	// Box Model
	.u-fluidSize();

	sl-app-container {
		background : none;
		border     : none;
	}
}
1 Like