List Control - Inline editing, but Add new Item button opens a dialog window

Hiya @Margo

I was wondering if there is a way to have inline editing, but have the new item button open in a dialog window?

I am guessing that we would have to hide the original button and create our own new item button, but I have no idea how to do that and then make the List control update after the new item in the dialog is saved. Or there might be a tasty option

Thanking you in advance

Ooooh, I thought I had it with

dt.buttons[0].click = _addItem()

but _addItem() is undefined, so yeah... you will need to help me! :slight_smile:

Hello @Jamal_Smith-Graham,

You can add the code below to insert a custom button to control's ribbon that opens a new form in a dialog.

fd.spRendered(function() {
    //new button
    var duplicateButton = {
        text: 'New Item',
        class: 'btn-secondary',
        visible: true,
        icon: 'Add',
        iconType: 0,
        click: function() {
            var dt = fd.control('SPDataTable1');
            var listId = dt._listId
            var funcName = dt._listViewManager.openDialogFuncName;
            var func = window[funcName];
            window[funcName] = function(url, pageType) {
                func(url, pageType);
            }

            var listurl =
            //replace "https://domain.sharepoint.com/sites/sitename/subsite" with path to your site
            "https://domain.sharepoint.com/sites/sitename/subsite/_layouts/15/listform.aspx?PageType=8&ListId="
            + listId;
            
            //PageType=8 means New Form, no itemId is required
            func(listurl, 8);
       }
    }

    fd.control('SPDataTable1').ready().then(function(dt) {
        //dt parameter is the same as fd.control('SPDataTable0')
        dt.buttons.push(duplicateButton);
        });

});

Thanks for this @Margo, just one issue though, once you have used the button, the button doesn't work anymore, you have to refresh the whole window before it works again. Please help!

Hello @Jamal_Smith-Graham,

The issue was caused by one code line. I've removed it. Please use the updated code from my previous post.

ah... it was the formSetId bit, it doesn't exist so it wouldn't run more than once...
Got it! :slight_smile:

I actually generalised your code to make it easier to use on multiple sites or multiple list controls:

//Create new item button
var addNewItemButton = {
    text: 'New Line Item',
    class: 'btn-primary',
    visible: true,
    icon: 'Add',
    iconType: 0,
    click: function (){
        openDialog(fd.control('SO_Items'));
    }
}
    
//function to open item in new window from a control
    function openDialog(fdControl) {
        var listId = fdControl._listId
        var funcName = fdControl._listViewManager.openDialogFuncName;
        var func = window[funcName];
        window[funcName] = function(url, pageType) {
            func(url, pageType);            
        }
        var listurl =    
        _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/listform.aspx?PageType=8&ListId=" + listId;
                
        //PageType=8 means New Form, no itemId is required
        func(listurl, 8);
    }