CODEWITHSUNDEEP
javascriptsharepointsharepoint-online
joshmk
joshmk

Reputation: 425

How to recreate Sharepoint quick edit button functionality in custom button

I got rid of the O365 bar and the edit bar (#s4-ribbonrow) on my site for styling purposes. I want the user to still be able to use the functionality that the "quick edit" button provides when they select a list item. How can i implement the same functionality in a custom button on my page?

Upvotes: 1

Views: 2082

Answers (1)

tinamou
tinamou

Reputation: 2292

Open SharePoint quick edit mode for view

SharePoint uses this method :

EnsureScriptParams('inplview', 'InitGridFromView', 'VIEW ID');return false;

So, your sample anchor element:

<a onclick="EnsureScriptParams('inplview', 'InitGridFromView', SP.ListOperation.ViewOperation.getSelectedView());return false;">TEST</a>

Use SP.ListOperation.ViewOperation.getSelectedView() to get view ID in older sharepoints, or use _spPageContextInfo.viewId in SharePoint Online

Open SharePoint edit item dialog

Use SP.ListOperation.Selection.getSelectedItems() to get selected items from view.

click button handler should look something like this:

if (SP.ListOperation.Selection.getSelectedItems().length === 1) {
    var itm = SP.ListOperation.Selection.getSelectedItems()[0];
    var _url = _spPageContextInfo.siteServerRelativeUrl + '/' + _spPageContextInfo.layoutsUrl + '/listform.aspx?PageType=6&ListId=' +_spPageContextInfo.pageListId + '&ID=' + itm.id;
    console.log(_url);
    var options = {
        title: "Edit item",
        width: 500,
        height: 600,
        showClose: true,
        allowMaximize: true,
        autoSize: true,
        url: _url
    };
    SP.UI.ModalDialog.showModalDialog(options); 
}

The hardest part is generating proper url:

PageType=6 means editform, value of 4 means dispform

To properly link to listform.aspx page you need to use some of _spPageContextInfo properties like list id, server relative url and layouts folder url

Upvotes: 1

Related Questions