Extract and rework data from {{content.*}}

[maximehabibi]

Hi, I want to customize the layout of a few forms, eg. App Registration.

I would like to re-do the HTML template so I did access the data with a console.log(content.form) on the concerned page.
The data I get back is complex nested structure of elements, which some of those looks like they are auto-generated by a private Mashery framework.

We are looking specifically to update the way Package & Plans are displayed on the app registration, do you have any indications or tips concerning this subject, and how to manipulate data related to plans & package.

Thank you ! 👍

[cferdinandi]

Hi @maximehabibi! If you simply want to reorder the fields in the form, I would recommend reaching out to your Mashery contact or opening a official support ticket.

We can make updates in the configuration of your Mashery instance to reorder those in the base markup.

That said, yes, the markup our system spits out for this at the moment is a horrific of data lists and nested divs. The easiest way to start working with this content would be to convert it from a string into a DOM node. This would allow you to target elements with things like querySelector(), check the innerHTML with test(), and more.

Here's how you might do that:

var form = document.createElement('div');
form.innerHTML = content.form;

You can now target select fields by doing things like this:

var fieldExample = form.querySelector('input[name="some_field_name"]');

Does that help? If I can clarify anything or did a bad job explaining, please let me know!

[cferdinandi]

Hi @maximehabibi - do you need anything else for this? Did the above work as expected?

[maximehabibi]

Hi @cferdinandi I did not try your suggested answer yet, expect an update tomorrow