Hi,
I have a formatted view on a list (followed this guide https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting) 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.
regards
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):
Title
Text body
from
to
Ttitle 2
Bext body 2
from
to
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: https://pnp.github.io/pnpjs/documentation/getting-started/
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: https://plumsail.com/docs/forms-sp/javascript/dialog.html
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;
if(value){
for (var i = 0; i < value.length; i++){
if(value[i].Order == poNumber ) {
//sets the background color of the row to red
$(row[i+1]).attr("style","background-color:red");
//sets the font color of the cell to green
$(row[i+1].cells[2]).attr("style","color: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.
I have implemented this and it works fine until I make a change in the control. Then it wipes out the formatting. What should I do to handle changes?
To clarify:
Here is my code:
fd.control('AllRFIs').ready().then(function(dt) {
dt.buttons[0].text = 'Add RFI';
var value = dt.widget.dataItems();
var row = $(dt.$el).find('tr');
if(value){
$.getScript('https://{mysite}.sharepoint.com/sites/pwa/Shared%20Documents/Other/moment-with-locales.js')
.then(function() {
for (var i = 0; i < value.length; i++){
var m = moment();
var b = moment(value[i].Date_x0020_Due);
var d = b.diff(m, 'days');
if (d < 0 && value[i].RFI_x0020_Status != '(3) Closed') {
$(row[i+1].cells[4]).attr("style","border-bottom:2px solid #ff6666; background-color:#ffb3b3")
} else if (d >= 0 && d <= 7 && value[i].RFI_x0020_Status != '(3) Closed') {
$(row[i+1].cells[4]).attr("style","border-bottom:2px solid #66ff66; background-color:#b3ffb3")
}
}
});
}
});
Here is the result:
Is there a way to keep this formatting once I add, edit or sort the list?
I looked at trying to use fd.control('AllRFIs').template but was not able to reproduce the same results with the background format & I was unable to use the $.getScript to do my date calculations.
Hello @cwalter2,
You can use setInterval method to apply formatting periodically to the control, so in case records are deleted or added the formatting updates accordingly.
function SPDataTableStyling() {
fd.control('AllRFIs').ready().then(function(dt) {
dt.buttons[0].text = 'Add RFI';
var value = dt.widget.dataItems();
var row = $(dt.$el).find('tr');
if(value){
$.getScript('https://{mysite}.sharepoint.com/sites/pwa/Shared%20Documents/Other/moment-with-locales.js')
.then(function() {
for (var i = 0; i < value.length; i++){
var m = moment();
var b = moment(value[i].Date_x0020_Due);
var d = b.diff(m, 'days');
if (d < 0 && value[i].RFI_x0020_Status != '(3) Closed') {
$(row[i+1].cells[4]).attr("style","border-bottom:2px solid #ff6666; background-color:#ffb3b3")
} else if (d >= 0 && d <= 7 && value[i].RFI_x0020_Status != '(3) Closed') {
$(row[i+1].cells[4]).attr("style","border-bottom:2px solid #66ff66; background-color:#b3ffb3")
}
}
});
}
});
}
//call function on form load
SPDataTableStyling();
//call function periodically
setInterval(SPDataTableStyling, 1000);Thank you. Will that have any unintended consequences with the form performance?
I achieved similar results with the following code but cannot set a background color for the entire cell (it just puts a background behind the text)
fd.control('AllRFIs').templates = {
Date_x0020_Due: function(ctx) {
var todaysDate = new Date().getTime();
var dateDue = ctx.row.Date_x0020_Due;
var dateDueTime = new Date(dateDue).getTime();
var dateDiff = Number(dateDueTime) - Number(todaysDate);
if (!dateDue) {
return '';
}
if (dateDiff < 0 && ctx.row.RFI_x0020_Status != '(3) Closed') {
return '<span style="border-bottom:2px solid #ff6666; background-color:#ffb3b3">' + dateDue + '</span>';
}
if (dateDiff >= 0 && dateDiff < 604800000 && ctx.row.RFI_x0020_Status != '(3) Closed') {
return '<span style="border-bottom:2px solid #66ff66; background-color:#b3ffb3">' + dateDue + '</span>';
}
if (dateDiff >= 604800000 && ctx.row.RFI_x0020_Status != '(3) Closed') {
return '<span>' + dateDue + '</span>'
}
if (ctx.row.RFI_x0020_Status == '(3) Closed') {
return '<span>' + dateDue + '</span>'
}
}
}Hello @cwalter2,
No, that should not involve the form performance.
Great job! Yes, this will change the text formatting only. And to change the entire cell styling you can use the code from my previous post.