Edit item modal

Is it possible to have the ability to launch the edit modal from a wiki page using the same syntax used for opening an Add Item modal from a wiki? Passing the item ID in the json object?

  • Ryan McDonough Not my knowledge, unfortunately it only seems possible using the js call javaScript:AddSheetItemCollection.editItem(925710,6139,22108,26413). There is a massive limitation to this,  when you edit a record  column logic in the iSheet will not work. All columns are always visible.  Would love to find a workaround to this!

  • David Corrin, Ryan McDonough - The attached should help you out. So in David's example, we would call:

    CommunityExamples.Sheet.editItem(925710, 6139, 22108, 26413);
    ;(function($, window, undefined) {
    
        window.CommunityExamples = window.CommunityExamples || {};
    
        window.CommunityExamples.Sheet = {
            editItem: function(itemID, sheetID, siteID, sheetViewID) {
                if (window.AddSheetItemCollection) {
                    window.sheetHomePageVar = $.extend(true, window.sheetHomePageVar, { 
    		    sheetID: sheetID,
    		    siteID: siteID,
    		    isDraftView: 0
                    });
                    window.AddSheetItemCollection.editItem(itemID, sheetID, siteID, sheetViewID);
                }
            }
        };
    
    })(window.jQuery.noConflict(), window);

  • Andrew Quinn This is great and it also respects the column logic making it even better. When save is clicked we are getting a permissions error - even though we are system admins, would you know how to fix this?

  • Seconded, that's fantastic that it works - just running into the same issue as David that it throws that permissions error on save.

  • Personally I prefer to not use their javascript to force the model up anymore as there is too much risk with things changing on their end. Instead I just use window.open() to open up the isheet page using a URL param to filter the item to just the 1 item (based on id), and then I use jquery on the modal window to manually click the edit button so the edit modal opens up. This should work mainly, however I then went a bit fancier and used jquery to monitor the HTTP requests and when it detected certain ones with a status of 200, I call a callback function to simulate the "oncreate" or "onedit" or "ondelete" events...

  • Ryan D'Souza Hey - I also have opted for that previously, it'd be great to see your monitoring events if you'd share them as ideally I'd like to close the new tab when the edit modal has closed as otherwise we get users stuck on the isheet page which I'm trying to keep them away from.

  • Here is the stuff I came up with, you can also test it out and modify it to close the window upon callbacks... You could also make it a popup instead of a new window so that the old page can still be seen underneath the popup. And when the popup window is small enough the form kind of expands the whole page so that could be a nice experience, but not sure how that would work on mobile though, or just make it open a popup on desktop and new tab on mobile.

    function WaitUntilElement(scope, element, exists, delay, callback) {
        var elements = scope().find(element);
        if ((exists && elements.length > 0) || (!exists && elements.length == 0)) {
            callback(elements);
        } else {
            setTimeout(WaitUntilElement, delay, scope, element, exists, delay, callback);
        }
    }
    function InterceptAjaxFormCall(event, xhr, settings, page, callback) {
        if (settings.url.toLowerCase().indexOf(page.toLowerCase()) === 0 && xhr.status === 200) {
            if (xhr.responseJSON && xhr.responseJSON.errorList) {
                var obj = JSON.parse(xhr.responseJSON.errorList);
                for(var prop in obj) {
                    alert(obj[prop]);
                }
            } else {
                callback();
            }
        }  
    }
    function openAddForm(siteID, isheetID, isheetViewID, data, onSave, callback) {
        function ajaxHelper(event, xhr, settings) {
            InterceptAjaxFormCall(event, xhr, settings, "sheetInsertItem.action?", onSave);
        }
        var new_window = window.open("/mysite/sheetHome.action?metaData.siteID=" + siteID + "&metaData.sheetId=" + isheetID + "&metaData.modulePage=sheetAddItem");
        $(new_window).load(function() {
            var $ = new_window.jQuery;
            WaitUntilElement(function(){return $(new_window.document).find("#isheet_module_addItem_modal");}, "#sheetInsertItem", true, 50, function(elements) {
                var $ = new_window.jQuery;
    
                $(new_window.document).ajaxComplete(ajaxHelper);
                $(new_window.document).ajaxSuccess(ajaxHelper);
    
                callback(new_window.document, elements);
            });
        });
    }
    function openViewForm(siteID, isheetID, isheetViewID, itemID, onSave, onDelete, callback) {
        function ajaxHelper(event, xhr, settings) {
            InterceptAjaxFormCall(event, xhr, settings, "sheetUpdateItem.action?", onSave);
            InterceptAjaxFormCall(event, xhr, settings, "deleteitem.action?", onDelete);
        }
        var new_window = window.open("/mysite/sheetHome.action?metaData.siteID=" + siteID + "&metaData.sheetId=" + isheetID + "&metaData.itemId=" + itemID + "&metaData.sheetViewID=" + isheetViewID);
        $(new_window).load(function() {
            var $ = new_window.jQuery;
            WaitUntilElement(function(){return $(new_window.document);}, "a[onclick^='javaScript:AddSheetItemCollection.viewItemModal']", true, 50, function(elements) {
                var onclick = elements.attr("onclick");
                new_window.eval(onclick);
    
                $(new_window.document).ajaxComplete(ajaxHelper);
                $(new_window.document).ajaxSuccess(ajaxHelper);
    
                WaitUntilElement(function(){return $(new_window.document);}, "#isheet_module_viewItem_modal", true, 50, function(elements) {
                    callback(new_window.document, elements);
                });
            });
        });
    }
    function openEditForm(siteID, isheetID, isheetViewID, itemID, data, onSave, callback) {  
        function ajaxHelper(event, xhr, settings) {
            InterceptAjaxFormCall(event, xhr, settings, "sheetUpdateItem.action?", onSave);
        }
        
        var new_window = window.open("/mysite/sheetHome.action?metaData.siteID=" + siteID + "&metaData.sheetId=" + isheetID + "&metaData.itemId=" + itemID + "&metaData.sheetViewID=" + isheetViewID); 
        $(new_window).load(function() {
            var $ = new_window.jQuery;
            WaitUntilElement(function(){return $(new_window.document);}, "a[onclick^='javaScript:AddSheetItemCollection.editItem']", true, 50, function(elements) {
                var onclick = elements.attr("onclick");
                new_window.eval(onclick);
    
                $(new_window.document).ajaxComplete(ajaxHelper);
                $(new_window.document).ajaxSuccess(ajaxHelper);
    
                WaitUntilElement(function(){return $(new_window.document).find("#isheet_module_editItem_modal");}, "#sheetInsertItem", true, 50, function(elements) {
                    callback(new_window.document, elements);
                });
            });
        });
    }

  • Curious to see if there is any change to this in the last 6 years.. Hopefully HighQ has an easier way to get Edit Item modal now..

  • By the way, i am using the code snippet below in Content Editor to show the modal pop up to add item to iSheet. It works great. Hoping to see something similar that I can use to show a modal pop up to edit an item.

    <p>
    <a class="CKContextLink" href="sheetHome.action?metaData.siteID=280&amp;metaData.sheetId=523&amp;metaData.sheetViewID=2919" id="{&quot;linkType&quot;:&quot;iSheetAddItem&quot;,&quot;siteID&quot;:280,&quot;contextID&quot;:523,&quot;sheetViewID&quot;:0,&quot;linkedFromCKEditor&quot;:true}" target="_self">Add new calendar</a>
    </p>
    <style type="text/css">@import url(company-us.highq.com/.../udb.css
    </style>