Insert custom fields into OOB html

To create a more seamless UI on data form extensions it would be nice to move the custom fields into OOB html. To start with we need to create our data form extension and have it show up on the OOB form.

oobuiinjection1-300x203

I want to move the “Date sent” row above the “Correspondence code” drop down list. No we need to get the ID of that row using the developer tools in Google Chrome. Hit F12 on your keyboard and the developer tools will pop-up. You can then click on the button on the far left side, it’s highlighted in the screenshot below.

oobuiinjection2

Click on the row you want to select and then find the “*_container” tr of the element you want to inject your html row before. As you can see it’s called “ctrl_9a80131c_4f12_462b_9367_b460ec0b2c5a_CORRESPONDENCECODEID_container”.

In our extension HTML file we will put our javascript to move our row. It is below.

oobuiinjection3

The finished product is below.

oobuiinjection4-300x200

Happy coding!
🙂

Posted in CRM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s