Move HTML content between | above/beneath form fields on portal

[newmay]

Hey!

I am customizing the Portal Profile Page and I would like to put a html table between | above/beneath a form field.

The HTML Table appears on the top of the form and I dont know how to move/position it properly.

Here the image to illustrate my issue:

[hershal1999]

@newmay I would add blank section on top an bottom. Once added we can use Basic Form Metadata to add HTML in label. If the table is static you can have complete HTML or if it is dynamic then you can just have empty Div tag and then you can use JavaScript to load that Div with a table. Does this make sense?   Let me know if you need further information.

[newmay]

Hi @hershal1999 !

Thanks for answering! Yes I get the approach, yet I am not sure where do insert the javascript function with liquid to fill the table dynamically. Do you mean in here? 

[newmay]

Would it be an approach to append the HTML Table within an DIV (with ID) as a previous sibling to the field I marked? with DOM?

[hershal1999]

You can either inject the javascript in two different places

1. In the basic form under the Additional Settings tab, there is a section for Custom JavaScript. 
2. In web template used by the page to render the basic form using <script></script> tag.

Just make sure you use

$(function(){

    //logic to inject HTML table

});

[hershal1999 · Accepted solution]

You can either append or update inner HTML with the id of the HTML tag that you have in the section label. 

[Fubar]

If this is just to display the Account/Organization address that is linked to the Contact you could use a Quick View form and add it to form that is used for the Profile.

[newmay]

Yes @hershal1999 I did that and it worked! Thanks.