Customize UI rendering of Lforms

[Vinita-S]

Hi,

I am working with a FHIR questionnaire and rendering it through Angular using LForms version 34 (LForms.Util.addFormToPage(this.questionnaire, 'formContainer'), where this.questionnaire is the FHIR questionnaire and formContainer is the ID of a div).

I would like to customize the rendering by using my own elements, for example, replacing the default LForms datepicker or input field with my own custom elements. I also want to maintain the inbuilt validations and extension support that LForms provides for these fields. Is there a way to achieve this?

Thanks,
Vinita

[lhcye]

lforms uses the datepicker from the antd UI component library. It's possible to replace it (and the input component) with a different component. Please take a look at the lhc-item-date component files. There is at lease one function (onItemValueChange from LhcDataService) that need to be called to trigger other changes when the item.value changes. The validation functions are outside of the most of the components. They're likely to work. lforms is not designed to be customizable at the component level. But I don't see it does not allow other components. Let me know if you are having problems.

[Vinita-S]

Based on my understanding, this.lhcDataService.onItemValueChange(this.item, this.item.value, prevValue) is intended to update the value, not the element itself. Please let me know if my understanding is incorrect. Could you provide an example or suggest a way to update the element? For instance, how can I replace the default LForms datepicker with an Angular Material datepicker? Thank you.

[lhcye]

this.lhcDataService.onItemValueChange triggers the all other related data changes and UI changes when the current item's value changes. It does not update current item's value. A datepicker UI component from Angular Material or other UI component library could be used like the datepicker from antd. How it can be integrated with lforms depends on the properties and functions the component provides. I don't have examples with other UI libraries. As I mentioned in the earlier message, the point is to keep the item's value in sync and call onItemValueChange whenever the value changes. You can send me the code if you are having troubles to make it work with Angular Material datepicker. I am not familiar with Angular Material but I will try my best.