Customization of Search Results Table¶
The record search results are displayed in a table. It is possible to change the appearance of the table cells: add a background, change the text color, etc. (Figure 1).
Figure 1. Recolored text in table cell
Implementation example: Re-coloring the text of a table cell into red
let React = window.UnidataReact.React;
export interface ISearchColumn extends IAbstractModel {
displayName: StringField;
description: StringField;
helperText: StringField;
displayable: BooleanField;
searchable: BooleanField;
order: IntegerField;
searchMorphologically: BooleanField;
children: ModelCollection<ISearchColumn>;
width: IntegerField;
typeValue: StringField<null>;
}
interface IProps {
record: SearchHit;
namespaceId: NamespaceId;
entityName: string;
column: ISearchColumn;
}
class CellView extends React.Component<IProps> {
render() {
const field = this.props.record.preview.find((item) => item.field === this.props.column.name.getValue());
if (field === undefined) {
return null;
}
const values = field.values.getValue();
return (
<div style={{color: 'red'}}>
{values.join(', ')}
</div>
);
}
}
export default {
type: 'RENDER_CELL', // custom extension type. Required to specify this value to override the appearance of the cell
moduleId: 'search-table-transform-value-lookup', // string - unique identifier of the module, you can enter another name
active: true, // flag - module is active? In most cases, leave it true
system: false, // flag - module is system? leave it false
resolver: () => { // display extension?
return true;
},
component: CellView // extension component
}