# Update data in custom renderer **URL:** \ **Category:** General\ **Created:** [April 26, 2024, 8:44am UTC](https://jsonforms.discourse.group/t/update-data-in-custom-renderer/2093 "2024-04-26T08:44:27Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![VladislavLinnik](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vladislavlinnik/32/1009_2.png) [@VladislavLinnik](https://jsonforms.discourse.group/u/VladislavLinnik)\ **Post date:** [April 26, 2024, 8:44am UTC](https://jsonforms.discourse.group/t/update-data-in-custom-renderer/2093/1 "2024-04-26T08:44:27Z")
Hey folks, I started using JSONforms recently and got an interesting question. I have an Angular app and use “@jsonforms/angular”: “3.2.0”, “@jsonforms/angular-material”: “3.2.0”, “@jsonforms/core”: “3.2.0”. I need to have such functionality: two checkboxes - Enable and Required, when the Required is checked, Enable should be checked as well, and the same behaviour when Required is unchecked. The important thing is that I have to send a string (required or enabled), not a boolean. I couldn’t find a normal way to do it, so I created a custom renderer where I added the two checkboxes like this \ export class FormFieldsComponent extends ToggleControlRenderer { @ViewChild(‘enabledCheckbox’, {static: true}) enabledCheckbox: ElementRef; @ViewChild(‘requiredCheckbox’, {static: true}) requiredCheckbox: ElementRef; readonly FORM\_FIELD\_STATE = FORM\_FIELD\_STATE; constructor( private jsonformsService: JsonFormsAngularService, changeDetectorRef: ChangeDetectorRef ) { super(jsonformsService, changeDetectorRef); } ngOnInit() { super.ngOnInit(); ``` if (this.data === FORM_FIELD_STATE.ENABLED) { this.enabledCheckbox.nativeElement.checked = true; this.form.setValue(FORM_FIELD_STATE.ENABLED); } if (this.data === FORM_FIELD_STATE.REQUIRED) { this.enabledCheckbox.nativeElement.checked = true; this.requiredCheckbox.nativeElement.checked = true; this.form.setValue(FORM_FIELD_STATE.REQUIRED); } ``` } onCheckboxChanged(state: FORM\_FIELD\_STATE) { if (state === FORM\_FIELD\_STATE.REQUIRED) { this.enabledCheckbox.nativeElement.checked = this.requiredCheckbox.nativeElement.checked; } this.data = FORM\_FIELD\_STATE.ENABLED; this.form.setValue(FORM\_FIELD\_STATE.ENABLED); this.jsonformsService.updateCore( Actions.update(this.propsPath, () =\> FORM\_FIELD\_STATE.ENABLED) ); this.jsonformsService.setData(FORM\_FIELD\_STATE.ENABLED); } } I just hardcoded ‘enabled’ to check if the data will be updated, but it doesn’t update. How can I update the data from the Custom Renderer? Thanks in advance ---
**Author:** ![VladislavLinnik](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vladislavlinnik/32/1009_2.png) [@VladislavLinnik](https://jsonforms.discourse.group/u/VladislavLinnik)\ **Post date:** [April 26, 2024, 8:47am UTC](https://jsonforms.discourse.group/t/update-data-in-custom-renderer/2093/2 "2024-04-26T08:47:29Z")
**Schema:** { “definitions”: { “order”: { “type”: “object”, “properties”: { “customer”: { “type”: “object”, “properties”: { “id”: { “type”: “string” }, “name”: { “type”: “string”}, “department”: { “type”: “string”, “enum”: [“Complaints Division”, “Complaints Division 2”, “Complaints Division 3”] }, “emailAddress”: { “type”: “string”, “format”: “email” } } }, “title”: { “type”: “string”, “minLength”: 5 }, “description”: { “type”: “string” }, “ordered”: { “type”: “string” }, “processId”: { “type”: “number”, “minimum”: 0 }, “assignee”: { “type”: “string” }, “startDate”: { “type”: “string”, “format”: “date” }, “endDate”: { “type”: “string”, “format”: “date” }, “status”: { “type”: “string”, “enum”: [“unordered”, “planned”, “ordered”] }, “amount”: { “type”: “integer”, “minimum”: 1, “maximum”: 100, “default”: 10, “multipleOf”: 1 } } } }, “type”: “object”, “properties”: { “orders”: { “type”: “array”, “items”: { “$ref”: “#/definitions/order” } } }, “required”: [“title”] } **UI Schema:** { “type”: “Categorization”, “elements”: [ { “type”: “Category”, “label”: “Orders”, “elements”: [ { “type”: “ListWithDetail”, “scope”: “#/properties/orders”, “options”: { “labelRef”: “#/items/properties/customer/properties/name”, “detail”: { “type”: “VerticalLayout”, “elements”: [ { “type”: “HorizontalLayout”, “elements”: [ { “type”: “Control”, “scope”: “#/properties/title” }, { “type”: “Control”, “scope”: “#/properties/processId” } ] }, { “type”: “VerticalLayout”, “elements”: [ { “type”: “VerticalLayout”, “elements”: [ { ``` "type": "Control", "scope": "#/properties/assignee" }, { "type": "HorizontalLayout", "elements": [ { "type": "Control", "scope": "#/properties/startDate" }, { "type": "Control", "scope": "#/properties/endDate" } ] }, { "type": "Control", "scope": "#/properties/status" }, { "type": "Control", "scope": "#/properties/ordered", "options": { "toggle": true } }, { "type": "Control", "scope": "#/properties/amount", "options": { "slider": true }, "rule": { "effect": "DISABLE", "condition": { "schema": { "const": "unordered" }, "scope": "#/properties/status" } } } ] } ] }, { "type": "Group", "label": "Customer", "elements": [ { "type": "Control", "scope": "#/properties/customer/properties/name" }, { "type": "Control", "scope": "#/properties/customer/properties/department" }, { "type": "Control", "scope": "#/properties/customer/properties/emailAddress" } ] }, { "type": "Control", "scope": "#/properties/description", "options": { "multi": true } } ] } } } ] }, { "type": "Category", "label": "Data", "elements": [ { "type": "Label", "text": "Data" }, { "type": "Control", "scope": "#/___data" } ] }, { "type": "Category", "label": "Language", "elements": [ { "type": "Label", "text": "Choose preferred locale" }, { "type": "Control", "scope": "#", "options": { "lang": true } } ] }, { "type": "Category", "label": "Contracts", "elements": [ { "type": "Label", "text": "Currently Empty Category" } ] } ``` ] } ---
**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\ **Post date:** [April 28, 2024, 10:04pm UTC](https://jsonforms.discourse.group/t/update-data-in-custom-renderer/2093/3 "2024-04-28T22:04:46Z")
Hi @VladislavLinnik, I see you tried all kinds of updating the JSON Forms State. This one should be sufficient: ```auto this.jsonformsService.updateCore( Actions.update(this.propsPath, () => FORM_FIELD_STATE.ENABLED) ); ``` However I’m missing some context here: To which property in the posted `schema` does your custom renderer belong? I don’t see any `enable` or `required` property there. Can you post the tester of the custom renderer? > [@VladislavLinnik](#): > > The important thing is that I have to send a string (required or enabled), not a boolean. > I couldn’t find a normal way to do it, so I created a custom renderer where - Note that in general I would not recommend extending `ToggleControlRenderer` for your use case but just extending `JsonFormsControl`. > I couldn’t find a normal way to do it, so I created a custom renderer where I added the two checkboxes - In case your custom renderer should adapt two properties of the `schema` at the same time, then this is possible but is quite cumbersome as this is not supported out of the box. You basically have to re-implement `JsonFormsControl` and bind against two properties instead of one When having such dependent use cases, it’s easier to implement this [via middleware](https://jsonforms.io/docs/middleware). * * * In summary: - If you like to render a text field as a toggle, then implement a custom renderer extending from `JsonFormsControl`, setting the text property as you need - To adapt properties based on changes on other properties, I recommend using [middleware](https://jsonforms.io/docs/middleware). ---
**Author:** ![VladislavLinnik](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vladislavlinnik/32/1009_2.png) [@VladislavLinnik](https://jsonforms.discourse.group/u/VladislavLinnik)\ **Post date:** [May 7, 2024, 3:04pm UTC](https://jsonforms.discourse.group/t/update-data-in-custom-renderer/2093/4 "2024-05-07T15:04:38Z")
Many thanks, Stefan for the recommendations. I’ll try