View formatting of related items


I have a formatted view on a list (followed this guide which is providing related items to its parent.

In forms I still get a tabular view of all columns. How is it possible to modify the visualization of related items?
I’m trying to get something similar to the “classic” newsletter design.


Dear Alex,

This approach won’t work with our List or Library control as it uses a custom control to render List view.

Could you please clarify, what exactly your customization is? Most likely the same result can be achieved by some JS.

Hi AlexZver
we have an parent list and a related one (which contains comments to the parent).
The comments should be visible like a news feed (or the “Newsletter” style known from SharePoint lists):

Text body

Ttitle 2
Bext body 2

thanks, Alex

Dear Alex,

List or Library allows you to display data in columns only, it does not support such customizations so far.

You can implement the control by yourself retrieving data from another list with pnp (already available in Forms) and put into the form in any manner with jquery:

Hi AlexZver,
thanks, got it working.
Do you have implemented a function to generate a button to create a related item?

Dear Alex,

You can implement this by opening a new form in dialog mode on button click:

yes, I did it that way. What I wanted to know if you have something “ready” to assign the created item to its parent?

Dear Alex,

You can pass a parent ID as an argument in the Dialog mode and then populate a lookup on the child form: Dynamically update Lookup Column

If you have any question about implementation - feel free to ask!

Alex, Can you detail your approach to getting it working please & thank you.

Hello @Office365guy,

Could you please share what do you want to design so I could guide you.

One of my customers would like to format the list / library control rows and columns like the JSON approach used on the SharePoint Views and Columns. Formatting would be based on form data along with list / library data in the control. While they want as much as they can get just coloring would be a start.

Example 1:
If logged in user is in the assigned to column, turn cell Green

Example 2:
If PO Number on form is in related list turn row Green & if due date is before tomorrow turn Date font color Red.

And so on.


You can change the background color, font, etc. of the specific row or cell with the following code.

fd.control('SPDataTable0').ready().then(function(dt) {
    //dt parameter is the same as fd.control('SPDataTable0')
    var value = dt.widget.dataItems();
    var row = $(dt.$el).find('tr');
    var poNumber = fd.field('PONumber').value;

        for (var i = 0; i < value.length; i++){
            if(value[i].Order == poNumber ) {
                //sets the background color of the row to red

                //sets the font color of the cell to green

value[i].Order - where Order in is the Name of the column in List or Library control.

row[i+1].cells[2] - where 2 is the index of the column. Note that index count starts from 0.