Hi, I have a custom table renderer and using custom cell renderers. However, I keep getting the ‘no applicable cell found’ error.
What should be passed into generate cells?
Hi @avwchapman,
Can you provide more information? As you have the table renderer and the cells under your control, you must make sure that the information handed over to the cell dispatcher is also the information you check against in your testers.
If both of these align, then your cell renderer should apply.
As a debugging technique you could register a cell renderer which is valid for all parameters and then compare to what you are testing against in your testers. There must be a mismatch.
I am trying to pass a uischema to DispatchCell
It seems that undefined is passed instead of an actual uischema?
This is an example of a uischema I am trying to pass to DispatchCell.
{
“type”: “Control”,
“label”: “Title”,
“options”: {
“display”: false,
“format”: “input”,
“serviceInfo”: null
},
“layout”: {
“width”: 12
}
}
Note sure where the
undefined (reading rule)
comes from then. As this rather indicates that the uischema is undefined.
However a Control always needs a scope as it always refers to a property of the schema. If Control without a scope is a use case for you, then you need a custom renderer which can handle them.
Thank you! Got that working but it seems to be using the out of the box cell renderer instead of my custom cell renderers. The uischema is the same from above but with the scope included. Here is the custom cell renderer and tester.
import React from ‘react’;
import { isStringControl, rankWith } from ‘@jsonforms/core’;
import { withJsonFormsCellProps } from ‘@jsonforms/react’;
import { MuiInputText } from ‘@jsonforms/material-renderers’;
import { InputControl } from ‘components/forms/customRenderers/inputControl’;
export const TextCell = props => <InputControl {…props} input={MuiInputText} />;
export const textCellTester = rankWith(2, isStringControl);
export default withJsonFormsCellProps(TextCell);
Hi @avwchapman,
Did you register your custom renderer/tester pair? Can you increase the priority of the tester a lot, e.g. 9999999999999 just to check whether it works at all?
I did register it, but now when I do that it makes every cell a text cell.
This is my uischema for a date cell:
{
“type”: “Control”,
“scope”: “#/properties/32:startOn”,
“label”: false,
“options”: {
“display”: false,
“dateSaveFormat”: “YYYY-MM-DD”,
“format”: “date”
},
“layout”: {
“width”: 4
}
}
import React, { useMemo } from ‘react’;
import PropTypes from ‘prop-types’;
import merge from ‘lodash/merge’;
import { isDateControl, isDescriptionHidden, rankWith, showAsRequired } from ‘@jsonforms/core’;
import { withJsonFormsCellProps } from ‘@jsonforms/react’;
import { Hidden } from ‘@mui/material’;
import { DatePicker, LocalizationProvider } from ‘@mui/x-date-pickers’;
import { AdapterDayjs } from ‘@mui/x-date-pickers/AdapterDayjs’;
import { createOnChangeHandler, getData, useFocus } from ‘@jsonforms/material-renderers’;
import { HelperText } from ‘components/forms/customRenderers/helpers/helperText’;
import { FieldLabel } from ‘components/forms/customRenderers/helpers/fieldLabel’;
export const DateCell = props => {
const [focused, onFocus, onBlur] = useFocus();
const { config, data, description, enabled, errors, handleChange, id, label, path, required, uischema, visible } = props;
const isValid = errors.length === 0;
const appliedUiSchemaOptions = merge({}, config, uischema.options);
const showDescription = !isDescriptionHidden(
visible,
description,
focused,
appliedUiSchemaOptions.showUnfocusedDescription
);
const format = appliedUiSchemaOptions.dateFormat ?? ‘YYYY-MM-DD’;
const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? ‘YYYY-MM-DD’;
const views = appliedUiSchemaOptions.views ?? [‘year’, ‘day’];
const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
return (
<FieldLabel id={id} error={!isValid} required={showAsRequired(required, false)} disabled={!enabled} label={label} />
<DatePicker
label={label}
value={getData(data, saveFormat)}
onChange={onChange}
format={format}
views={views}
disabled={!enabled}
slotProps={{
actionBar: ({ wrapperVariant }) => ({
actions: wrapperVariant === ‘desktop’ ? : [‘clear’, ‘cancel’, ‘accept’]
}),
textField: {
id: id + ‘-input’,
required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
autoFocus: appliedUiSchemaOptions.focus,
error: !isValid,
fullWidth: !appliedUiSchemaOptions.trim,
inputProps: {
type: ‘text’,
‘aria-label’: id
},
InputLabelProps: data ? { shrink: true } : undefined,
onFocus: onFocus,
onBlur: onBlur,
variant: ‘standard’
}
}}
/>
<HelperText error={!isValid && errors} description={showDescription && description} />
);
};
DateCell.propTypes = {
config: PropTypes.any,
data: PropTypes.any,
description: PropTypes.any,
enabled: PropTypes.any,
errors: PropTypes.any,
handleChange: PropTypes.any,
id: PropTypes.any,
label: PropTypes.any,
path: PropTypes.any,
required: PropTypes.any,
uischema: PropTypes.any,
visible: PropTypes.any
};
export const dateCellTester = rankWith(5, isDateControl);
export default withJsonFormsCellProps(DateCell);
Can you post a full-selfcontained example where it is going wrong for you to Github, or even better, to something like stackblitz?
So it seems that the tester succeeds too often, however the tester itself looks fine. I can’t tell you from the posted code what is going wrong, as mentioned above a full reproducible example seems to be required.