3

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 :

enter image description here

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);
}

1 Answer 1

2

I advise you the CSR (Client-Side Rendering) way by deploying a custom JavaScript file to you SharePoint site (site assets, style library or CDN).

  • Here an excellent article with sample codes.
  • Here more answers from the community

Enjoy.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.