Migrate Coral UI 2 Multifield to Coral UI 3 Multifiel...

[bilal_ahmad]

Dear Community Members,

I want to replace the existing multifield(/libs/granite/ui/components/foundation/form/multifield) with the newer one(/libs/granite/ui/components/coral/foundation/form/multifield). The existing multifield is storing content in object format:

I want to convert this existing multi-field JSON data to nodes data. So there are two things involved, one being the usage/introduction of new multifield and second the data migration.

Any help/suggestion is highly appreciated.

Thanks, Bilal.

@ahmedmusallam @arunpatidar @Jörg_Hoh 

[arunpatidar · Accepted solution]

Change the dialog multifield resource type in order to convert coral2 to coral3.

The Challenging part is the content migration, which can be handled by creating a custom utility to convert JSON into nodes

e.g.

https://github.com/arunpatidar02/aem63app-repo/blob/master/java/MultifieldConvertCoral2to3Servlet.ja...

[bilal_ahmad]

I can't thank you enough for the help, @arunpatidar. It worked! the only thing that's not happening right now is -

When a content author opens the dialog, a java servlet is being called(I have registered the servlet via resourceType) and new node structure is created, at the same time the values which are in JSON format gets stored in the nodes(item0, item1 etc - this all happening in the backened). The issue is that for the first time the dialog doesn't get populated with the values. Author has to close the dialog and re-open it - this time the values get populated properly.

Could you please suggest something to avoid this as well? Many Thanks, Bilal.

[bilal_ahmad]

Such prompt response:) Thank you so much Arun, i'll try this right away!

[ahmedmusallam]

This is an interesting topic, I have not implemented a solution for this, but if I did, here are my 2 cents:

Some assumptions to start with:
1. The JSON structure is the same for every instance of your component that's already authored
2. You already use a Sling Model or Use class to get data from JSON

My suggested solution:
1. Rewrite your dialog to use CoralUI3 multifield
2. Rewrite the backing Sling model/Use class to use the nodestore instead of JSON. You should NOT need to change the component HTL or the Sling model/Use class API, only the internal code by which it retrieves the values (to get them from child nodes instead of JSON).
3. write an ACS Commons MCP  or Groovy Script to convert your JSON to a Node Structure for every instance of your component. The node structure must match that which is generated by the CoralUI3 multifield in step 1.

In theory, this would not really need to be verified for every component instance, because you have not changed the Java API for your class or the HTL for your component. Only the internal code. You do, however, need to test sensible authoring scenarios based on your dialog and how complex it is.

Note*: an MCP has the advantage of reporting and error logging for every single component instance, if you write it to do so. You could also write a verification script, that runs after your other script to verify the changes it made. This ensures everything was saved properly and that your repo is consistent.

Note2*: You don't really need to delete the JSON, it can stay there just in case there are issues with the conversion or you need to roll back. When you are 100% sure things are good, you can write a script to remove the JSON.

[bilal_ahmad]

Thank you so much Ahmed, I'll try and keep you posted!

[sarathraju]

Hey There.. We have migrated our multifield components to coral ui3. Ran script to migrate the existing json content to save as nodes. The script ran successfully and data is saved properly. However when we open the page the data is not getting displayed. When we edit the dialog values are showing up in dialog and once we click ok then the data is getting displayed. Checking if any of you guys faced this issue ?