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

Forms SharePoint Online
#1

Hiya @mnikitina

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:

#2

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

});
1 Like
#3

Thanks for this @mnikitina, 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!

#4

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.

1 Like
#5

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