How to render the webform field with custom field component

[awset]

Hi Ripple Team,

I have a use case that requires rendering the text field and text area differently to enhance the user experience. Currently, I have a DOB field using a text field and a Preferred Contact Time field using a text area.

For the DOB, I need to capture the date, month, and year in separate fields, apply custom validation, and then construct the date string into the text field.

For the Preferred Contact Time, I need a set of fields to capture specific times of day from Monday to Friday. These fields will populate the text area with line breaks separating the times.

This approach will help us uniformly capture the data format from users.

Here is the final image we are aiming for:

I have implemented this in Ripple1 by patching the webform mapping and assigning a custom component when the field has a custom class set in the Webform configuration. However, in Ripple2, I can't simply override the component.

Currently, Ripple2 uses RplFormText, mapped to the RplFormInput component. I am unable to override the RplFormInput in my custom layers or modules as I did with TideContentPage, like this:

addComponent({
  name: 'RplFormInput',
  filePath: resolve('./components/RplFormInput.vue'),
  priority: 10
})

I tried overriding the RplForm.vue, but it led to a complex process involving copying plugin files and other unrelated files, which still resulted in issues.

What is the best way to achieve this? I am looking for a solution similar to this PR in Ripple1: https://github.com/dpc-sdp/legalaid-vic-gov-au/pull/254

Thank you.

[waitingallday]

@awset we recently added a feature to add custom inputs from outside the core set in ripple-ui-forms, but honestly didn't consider the case where you'd want to override an existing one.

At the moment it works just by adding the input to its own formkit plugin, and combining them on RplForm, but to override one you'd need to remove it from the core plugin as well (we're adding the core plugin first, so the namespace would always be taken).

I think this can be done, but we would need to scope it and add it to the backlog (actually great timing, because we do have some bigger form work in the pipeline).

Not sure if this is relevant, but you could look at how the kinder calculator was rebuilt for some ideas on using our core date input - this one uses the combined date from the control and parses it back into a date object to manipulate the parts: https://github.com/dpc-sdp/ripple-vic-gov-au-custom/blob/main/layers/kinder-calculator/components/global/VicKinderCalculator.vue

[waitingallday]

Yes definitely, if you could clone the textfield into another input with a unique name, that would work perfectly. I added a self-contained layer on the example nuxt-app to demonstrate how you set up the config (and probably didn't mention it anywhere):

https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/nuxt-app/layers/ripple-ui-forms-ext

You can run that on the monorepo at http://localhost:3000/_test/webform to see it in action (that version uses a snapshot fixture of a drupal CMS with the item input enabled).

[awset]

hi @waitingallday, I am able to create custom input to replace both textfield and textarea with specific class that is set via webform config.

Do you know if it is possible to create a custom validation? I can add OOTB FormKit validation to my custom inputs, but I am not able to add custom validation.

I did have a look at https://formkit.com/essentials/validation#custom-rules but I never able to declare it globally.

Please let me know if you have any example or an idea how to do it.

[awset]

hi @waitingallday is custom validation possible? if not I maybe need to re-think other solution.

[waitingallday]

@awset No I don't think so - the validations are all defined in ripple-tide-webform and there is no way of adding custom rules or even overriding them right now https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-tide-webform/mapping/webform-validation.ts#L12

If it's something that you need then we can look into it?

[awset]

hi @waitingallday I believe in this legal aid case, we need custom validation,

I can inject available formkit validation rules as per mentioned here https://formkit.com/essentials/validation#available-rules, like alpha, number, etc by remapping the embedded_webform paragraph nitroApp.tide?.pageApi.setDynamicComponent('paragraph--embedded_webform', webformsRemapping), then I modify the result from getFormSchemaFromMapping(), and push the available formkit validation.

However, as per I describe above, I am not able to introduce custom validation rules, if you could provide a way to declare custom validation that would be really helpful.