Trigger popup from javascript?

Yes, there is. There is a skuid utils method that you can use for exactly this purpose: var popup = skuid.utils.createPopupFromPopupXML(popupXML,context); that returns a jQuery object around a new jQuery UI Dialog / Popup box, which you could then run jQuery UI Dialog methods on, such as: popup.dialog(‘close’); where popupXML is a jQuery object around the XML definition of a popup, such as would be created by Skuid using one of the Popup Action types, e.g.

<popup title="Editing Case: {{CaseNumber}}" width="80%"> <components> <pagetitle model="CaseData"> <maintitle>{{CaseNumber}}: {{Subject}}</maintitle> </pagetitle> </components> </popup> 

and context is an optional JavaScript object providing Skuid with some context in which to create the popup — for instance, you might want to pass in a particular row here so that Skuid knows which row to render the popup relative to, e.g. // Get the 14th row in our Cases Model var case = CasesModel.data[13]; context = { row: case }; // So to show the above popup XML in context of this row, here’s what we would need to do in Skuid from a JavaScript Snippet:

var popupXMLString = '<popup title="Editing Case: {{CaseNumber}}" width="80%">' + '<components>' + '<pagetitle model="CaseData">' + '<maintitle>{{CaseNumber}}: {{Subject}}</maintitle>' + '</pagetitle>' + '</components>' + '</popup>'; var popupXML = skuid.utils.makeXMLDoc(popupXMLString); var CasesModel = skuid.model.getModel('Cases'); var case = CasesModel.data[13]; context = { row: case }; var popup = skuid.utils.createPopupFromPopupXML(popupXML,context); 

For a more extended example, here is a use case: Case Actions: Escalate, Mass Escalate We want to add a “Escalate” Row Action to a table on Cases, and a “Mass Escalate” Mass Action as well. These Actions will both launch a popup, via JavaScript, that lets you enter a reason for the Escalation, and then will Escalate these Cases and add Case Comments to each selected Case corresponding to the reason provided. Here is what the final product looks like: THE CODE Essentially this is all achieved through 2 JavaScript Snippets, and 2 extra Models added to a Skuid Cases page. Here are the Snippets: And here are the two Models: NewCaseComments, EscalationReason. For both Models, go to their Advanced Properties, and set “Load Model data on page load” to FALSE (unchecked). Our popup snippet will create rows in the Models when appropriate. The first Snippet, ShowEscalationPopup, is called by a “Escalate” Row Action and a “Mass Escalate” Mass Action, and the The second Snippet, FinishCaseEscalation, is called by a PageTitle Action within the Popup that we launch from JavaScript. Here is the code for the two Snippets, which is commented so as to help explain how it works. Enjoy! Snippet 1: ShowEscalationPopup

var params = arguments[0], $ = skuid.$, list = params.list, model = params.model, $xml = skuid.utils.makeXMLDoc, selectedItems = params.item ? [params.item] : list.getSelectedItems(), NewCaseCommentsModel = skuid.model.getModel('NewCaseComments'), EscalationReasonModel = skuid.model.getModel('EscalationReason'); // Cancel any preexisting changes to our CaseComments model // and our EscalationReason model skuid.model.cancel([ NewCaseCommentsModel, EscalationReasonModel ]); var selectedCaseNumbers = []; var casesAlreadyEscalated = []; $.each(selectedItems,function(i,item){ var caseRow = item.row; // If one of the Cases is ALREADY Escalated, // then we will complain. if (caseRow.IsEscalated || caseRow.Status=='Escalated') { casesAlreadyEscalated.push(caseRow.CaseNumber); return true; } selectedCaseNumbers.push(caseRow.CaseNumber); // Create a new row in our NewCaseComments model // for each selected item NewCaseCommentsModel.createRow({ additionalConditions: [ { field: 'ParentId', value: caseRow.Id } ]}); }); if (!selectedCaseNumbers.length){ alert('All of the selected Cases are already Escalated.'); } // And create a new row in our EscalationReason model EscalationReasonModel.createRow(); // Build the XML of your popup. // If you already have a reference to this xml string stored somewhere else, // then you don't need to create it here. var popupXMLString = '<popup width="50%" title="Escalate Cases">' + '<components>' + '<pagetitle model="EscalationReason">' + '<maintitle>Escalate Cases: ' + selectedCaseNumbers.join(', ') + '</maintitle>' + '<actions>' + '<action type="custom" snippet="FinishCaseEscalation" label="Complete Escalation" icon="ui-silk-accept"/>' + '</actions>' +'</pagetitle>' + '<basicfieldeditor model="EscalationReason" mode="edit" showsavecancel="false">' + '<columns>' + '<column width="100%">' + '<sections>' + '<section title="Escalation Reason">' + '<fields>' + '<field id="CommentBody" required="true"/>' + '</fields>' + '</section>' + '</sections>' + '</column>' + '</columns>' + '</basicfieldeditor>' + '</components>' + '</popup>'; var popupXML = $xml(popupXMLString); var context = { }; // Launch a Popup asking the user to provide an Escalation reason var popup = skuid.utils.createPopupFromPopupXML(popupXML,context); 

Snippet 2: FinishCaseEscalation

var params = arguments[0], $ = skuid.$, EscalationReasonModel = params.model, escalationReason = params.model.getFieldValue(params.row,'CommentBody',true), CasesModel = skuid.model.getModel('Cases'), NewCaseCommentsModel = skuid.model.getModel('NewCaseComments'), EscalationReasonModel = skuid.model.getModel('EscalationReason'); // If we weren't given an escalation reason // that is at least 5 characters long, // don't do anything if (!escalationReason || escalationReason.length<5){ alert('Please provide an Escalation Reason that is at least 5 characters.'); return; } // Apply the Escalation Reason specified // to all of our new case comment records // which were created behind-the-scenes // when we showed our popup var selectedCaseNumbers = []; $.each(NewCaseCommentsModel.data,function(i,newCommentRow){ var parentCase = CasesModel.getRowById(newCommentRow.ParentId); // Update the Status of all of our selected Items to be "escalated" if (parentCase) { CasesModel.updateRow(parentCase,'Status','Escalated'); CasesModel.updateRow(parentCase,'IsEscalated',true); NewCaseCommentsModel.updateRow(newCommentRow,'CommentBody',escalationReason); } else { NewCaseCommentsModel.deleteRow(newCommentRow); } }); // Block the UI while we're saving. $.blockUI({ // Use this syntax if you want to show a Custom Label // instead of hard-coding the message in our popup. // Create a Custom Label called "escalating_cases" // and include it in this page //message: skuid.label.read('escalating_cases') message: 'Escalating Cases...' }); // Save our Case Escalations first, // then save our new Case Comments ONLY // if the Case Escalations all succeeded CasesModel.save({callback: function(result){ if (result.totalsuccess) { // Now save our Case Comments NewCaseCommentsModel.save({callback: function(result2){ $.unblockUI(); if (result2.totalsuccess) { // Close the popup $('.ui-dialog-content').dialog('close'); } }}); } else { $.unblockUI(); } }});