I'm trying to customize the ListForm template used in the webpart that displays information about a list in the EditForm.aspx, NewForm.aspx and DispForm.aspx pages
I want to add 2 buttons within the webpart the Disp form next to the "Close"(Fermer) button wich will trigger different functions :
And in the New end Edit forms, I want to add more fields to fill depending on other infos selected, ex:
one of the field would be a radio button control indicating if wether or not you want to add a contact
If the button is cilcked and active, another field would show up where you can select a contact
I've made some research about it and tried a few things :
Making another webpart below the existing one with a JavaScript code and 2 buttons, that does the work for the DispForm but looks awful
I have found the different pages in SharePoint designer but I didn't find a way to modify the webparts from there
Can I also do it using Visual studio ?
Is there a way to use the ListFormWebPart class ?
Or do I have to write the WebPart myself from scratch ?
EDIT :
For anyone looking for an official tutorial : https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/customize-a-list-view-in-sharepoint-add-ins-using-client-side-rendering
EDIT 2
Here's the full working code that solved my problem, in case anyone wanted it :
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
{
OnPostRender: function(ctx){
if(ctx.ListSchema.Field[0].Name == 'Attachments')
ManageButtonTemplate(ctx.ListSchema.Field[0]);
}
});
function ManageButtonTemplate(item)
{
var identifier = 'ctl00_toolBarTbl_RightRptControls_ctl01_ctl00_diidIOGoBack';
var buttonNode = document.querySelector('input[id*="' + identifier + '"]');
AppendButton(buttonNode.parentElement, "Valider", "true");
AppendButton(buttonNode.parentElement, "Refuser", "false");
}
//Configuration et ajout du bouton demandé à une balise donnée
function AppendButton(node, name, status)
{
var button = document.createElement("input");
button.type = "button";
button.value = name;
button.id = name;
button.name = name + "Button";
button.onclick = function() {
new ManagementAction(status);
};
node.appendChild(button);
}