GUI Extensions open a popup after selecting some elements

Question

I need to create a GUI extension in which after select one or more elements and click a ribbon button a popup window should appear to show the user some options and after seletec them and click ok a workflow has to start. Right now I'm focused on trying to open the popup window and pass to it the selected items. I created in the js file the following code:

Extensions.enviarTraducir.prototype._execute = function enviarTraducir$_execute(selection) {
var tcmUris = "";
for (var i = 0; i < selection.getCount() - 1 ; i++) {
    tcmUris += selection.getItem(i) + ",";
}
tcmUris += selection.getItem(selection.getCount()-1);
var host = window.location.protocol + "//" + window.location.host;
var url = host + '/WebUI/Editors/Traducciones/client/html/popup.htm?Uris=' + tcmUris;
var popup = $popup.create(url, "toolbar=no,width=400px,height=200px,resizable=false,scrollbars=false", null);
popup.open();
};

but it still doesn't work. A part of that if it works, I don't know how to pass that information to a core service code that makes the workflow starts and do his stuff. Does anyone has a clue, links, tutorial or something it could help me? Could be that popup.htm a popup.aspx page? That could maybe solve my problem Thanks in adnvance.

Answer 1

I did something like this many moons ago (maybe 4 years ago, while I was still in touch with the software).

For the popup, I copied the code and files from Tridion's "Localize or open local" dialog and modified it to show the stuff I needed. In my _execute method I have:

if (selection.getItems()) {
    if (selection.getItems().length > 0) {
        p.items = selection.getItems();
        var popupUrl = $config.Editors["WorkflowExpiration"].vdir;
        popupUrl = popupUrl + "Views/StartExpirationWorkflowPopup/StartExpirationWorkflowPopup.aspx";
        var args = { popupType: Tridion.Controls.Popup.Type.MODAL_IFRAME, items: selection.getItems() };
        var features = { height: 508, width: 280 };
        p.popup = $popup.create(popupUrl, features, args);
        p.popup.open();
        $evt.addEventHandler(p.popup, "cancel", this.getDelegate(this._onPopupCancel));
        $evt.addEventHandler(p.popup, "submit", this.getDelegate(this._onPopupSubmit));
    }
}

and this is what I had in _onPopupSubmit (calling the model):

if (p.popup) {
    p.popup.dispose();
    p.popup = null;
    var selectedExpirationDate = e.data.selectedDate;
    var totalItems = p.items.length;
    var message = $messages.registerProgress("Starting expiration workflow for " + totalItems + " item(s)...", "Starting expiration workflow for " + totalItems + " item(s)...", false, false, false);
    for (var i = 0; i < totalItems; i++) {
        message.setTitle("Starting expiration workflow for " + (totalItems - i) + " item(s)...");
        CompanyName.Extensions.Services.ExpireItemInWorkflow.Execute(p.items[i], selectedExpirationDate, null, null, null, null);
    }
    message.finish();
    $messages.registerGoal("Finished starting expiration workflow for " + totalItems + " item(s).");
}

This was still 2011, so I didn't have to start a workflow explicitly (a save would kick it off). You'll have to do some digging on starting a workflow in 2013, don't think it's that complicated.