Customize styles with dependencies

Widgets
1

I want to use the styles from [Utility Classes - New Widgets Showcase]<INTERNAL_LINK>. But I want to make two adaptions:

  1. Change the colors.
  2. Add conditions under which the styles should be used. E.g. in an overview, only put a border around cells/rows that have a specific content.
    Is this somehow possible? How could I do that?
2

Hi @clara-fleet-yew,

Yes, it is totally feasible to apply such logic to a row. Overview Engine has already shipped with an API which allow you to apply custom CSS’s style or classname to each row based on your provided condition. Take a look at this example:

import { OverviewEngineFactories } from "@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/client-extensions";

export const CustomOverviewEngineRowStyling = (props: View) => (
	<OverviewEngineFactories.ViewComponent
		{...props}
		rowStyling={({ row, rowIndex }) => {
			// A row of Overview Engine is always an actual document
			// In a proper case, type guard should be applied instead of "any"
			// e.g.: `ProductType.isInstance(row)`
			const document = row as any;
			if (document.Product?.status === "delivered") {
				return { className: "-u-background-orange-dark" };
			}

			// The row's index could be used as a condition too
			if (rowIndex % 2 === 1) {
				return { className: "-u-background-grey-light" };
			}

			// Default fallback styling
			return { interactive: false, className: "-u-font-bold" };
		}}
	/>
);

For more details about rowStyling props, you can have a look here GetA12 Overview Engine Custom Row Styling.

Applying custom styling to a cell, on the other hand, will require a bit lower level customization. You would have to apply a Custom Widgets Table component via Overview Engine’s WidgetsMap then apply a custom cellStyling props, which is very similar to the rowStyling props above. If you find this approach inconvenient, consider creating a ticket for us so we can have a similar API targeting both row & cell.

3

Hi @clara-fleet-yew,
has your question been answered or do you need further support? If it is solved, please, use the checkbox to mark the solution to your problem so that other users also know what helped in your case.
Thanks in advance!
Denise from the Discourse team