I have created a sharepoint hosted app to create a custom action like Create Zip Button.

I have created custom action for ribbon. In first Step I selected Hostweb and select custom action scope as Document Library. In second step it asks where does a button control navigate to ?

It shows URL of Default.aspx Page. Now Is it compulsory to give Page URL.

My requirement is not to redirect a Page. Instead of redirecting a page when user click on button from custom ribbon from document Library I need List of all files and to create a zip.

What to do to achieve this? Is it possible using sharepoint hosted app?

1 Answer 1


Yes you can create a custom ribbon button which doesn't require page redirect. Check below:

    function RibbonValidation() {
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        try {
            var pm = SP.Ribbon.PageManager.get_instance();
            pm.add_ribbonInited(function () {
            var ribbon = null;
            try {
                ribbon = pm.get_ribbon();
            catch (e) { }
            if (!ribbon) {
                if (typeof (_ribbonStartInit) == "function")
                    _ribbonStartInit(_ribbon.initialTabId, false, null);
            else {
        } catch (e)
        { }
    }, "sp.ribbon.js");
function CreateRibbon() {
    var Ribbonhtml = document.createElement('div');
    Ribbonhtml.setAttribute("id", "CustomRibbon");
    Ribbonhtml.innerHTML = "<div><a href='#' onclick=\"LoadApps()\" ><img src='../_layouts/images/NoteBoard_32x32.png' /></a><br/>SP Add-in\'s</div>";
    var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
    if (ribbon) {
        var tab = new CUI.Tab(ribbon, 'GlobalRibbon.Tab', 'Option', 'Option', 'GlobalRibbon.Tab.Command', false, '', null);
        ribbon.addChildAtIndex(tab, 1);
        var group = new CUI.Group(ribbon, 'GlobalRibbon.Tab.Group', 'Custom Ribbon', 'Global Ribbon Example', 'GlobalRibbon.Group.Command', null);
    SelectRibbonTab('GlobalRibbon.Tab', false);
    SelectRibbonTab('Ribbon.Read', true);
    window.removeEventListener("DOMContentLoaded", RibbonValidation, false);
function LoadApps() {
//add your custom logic to get items from SharePoint list and zip the files
//here i am getting list of all apps installed in the site collection and showing them in a dialog.
    clientcontext = SP.ClientContext.get_current()
    currentWeb = clientcontext.get_web();
    appinstancesList = SP.AppCatalog.getAppInstances(clientcontext, currentWeb);
    clientcontext.executeQueryAsync(Success, fail);
function DialogApps(stringHtml) {
    var element = document.createElement('div');
    element.innerHTML = stringHtml;
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', {
        html: element,
        title: "SharePoint Add-in",
        allowMaximize: false,
        showClose: true,
        autoSize: true
function Success() {
    var stringHtml = '';
    var list = appinstancesList.getEnumerator();
    while (list.moveNext()) {
        var current = list.get_current();

        stringHtml += '<div>' + current.get_title() + '</br><a href=\'' + _spPageContextInfo.webServerRelativeUrl + ((_spPageContextInfo.webServerRelativeUrl.indexOf('/', _spPageContextInfo.webServerRelativeUrl.length - 1) !== -1) ? '' : '/') + '_layouts/15/appredirect.aspx?instance_id={' + current.get_id() + '}\'>Link</a></div>';
function fail(sender, args) {

Reference - Header & Footer SharePoint Add-In with custom ribbon button

  • Is It possible with Share Point Hosted App and Office 365 ? Commented Oct 19, 2016 at 7:28
  • I only want to use JSOM not Code behind. Is this one will suitable to me ? How to apply this with share point hosted app visual studio project? Commented Oct 19, 2016 at 7:30
  • Yes this is pure JSOM code and it's suitable for your requirement. Check the link and see the implementation of PnP. Commented Oct 19, 2016 at 7:32

Your Answer

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

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