{"type":"doc","content":[{"type":"paragraph","content":[{"text":"The Portals Extension Module has been created to allow 3rd party content and applications to be integrated inside Portals. This documentation is split into several parts and each relevant section also includes a list of API functions.","type":"text"}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"Topics:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#36b37e"}},{"type":"strong"}]}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"maxLevel":{"value":"2"},"style":{"value":"none"}},"macroMetadata":{"macroId":{"value":"d12fb4eb-bd55-478a-8384-421034296c8f"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}}}},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Including Portals API in your application","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":841,"id":"0a2d2724-17cd-4112-baec-38a85b68f890","collection":"contentId-1083768859","type":"file","height":281}}]},{"type":"paragraph","content":[{"text":"The Extension module allows integration of your application into portals by providing an iFrame for your content and an API for communication with Portals. The module accepts an url and allows dynamic GET parameters to be passed to your application through that url. Just select the participant variables and master data you want to pass to your application and provide names for the GET keys.","type":"text"},{"type":"hardBreak"},{"text":"A portals page can have several Extension modules on a single page and all modules can communicate with each other through the provided message bus in the Portals API.","type":"text"},{"type":"hardBreak"},{"text":"For enhanced data exchange with EFS, we recommend that your application uses the EFS ServiceLayer in the backend to query and update data in EFS.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Import","type":"text"}]},{"type":"paragraph","content":[{"text":"In your application, you have to import the PortalsAPI JavaScript file in order to be able to use the message bus or other Portals API functions.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Initialization","type":"text"}]},{"type":"paragraph","content":[{"text":"After your document has finished loading you need to initialize the api. This registers your document with Portals for messaging.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Checking initialization status","type":"text"}]},{"type":"paragraph","content":[{"text":"You can check the initialization status by calling ","type":"text"},{"text":"isInitialized","type":"text","marks":[{"type":"em"}]},{"text":", though it is generally recommended to do your api operations in the ","type":"text"},{"text":"then","type":"text","marks":[{"type":"em"}]},{"text":"-handler of the ","type":"text"},{"text":"initialize","type":"text","marks":[{"type":"em"}]},{"text":" method as shown above.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.isInitialized();","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Unregister","type":"text"}]},{"type":"paragraph","content":[{"text":"You can completely revert the registration of the iFrame and unregister all its handlers by calling ","type":"text"},{"text":"unregister","type":"text","marks":[{"type":"em"}]},{"text":".","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.unregister();","type":"text"}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Using the Portals message bus","type":"text"}]},{"type":"paragraph","content":[{"text":"The message bus is intended for communication between extension module iFrames. You can send and listen to your own events and transfer any data you want.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Listening for messages","type":"text"}]},{"type":"paragraph","content":[{"text":"After the initialization has been completed you can start to register handlers for events from other iFrames. The example code registers a handler for an event called \"myEvent\". This is an event name that you expect other iFrames to send messages for.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.initialize().then(function() {\n Questback.portalsApi.bus.subscribe('myEvent', function(data) {\n ...\n });\n};","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Sending messages","type":"text"}]},{"type":"paragraph","content":[{"text":"Sending a message to other iFrames is just as simple. You just call the ","type":"text"},{"text":"send","type":"text","marks":[{"type":"em"}]},{"text":" method with an eventname that you chose and a data object as second parameter.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.bus.send('myEvent', { foo : \"bar\"});","type":"text"}]},{"type":"paragraph","content":[{"text":"Just note that you do not get a result back from this call, as it works like a broadcast. Also note that by default the sending iFrame will not receive its own event back, even if it has registered a handler for it. You can supply a third parameter to ","type":"text"},{"text":"send","type":"text","marks":[{"type":"em"}]},{"text":" with a value of ","type":"text"},{"text":"true","type":"text","marks":[{"type":"em"}]},{"text":" to force sending the event to the sender iFrame, too.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Stop listening for messages","type":"text"}]},{"type":"paragraph","content":[{"text":"You can remove handlers for events by an eventname.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.bus.unsubscribe('myEvent');","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that this removes all handlers for the given eventname for this iFrame at once.","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Querying data from Portals","type":"text"}]},{"type":"paragraph","content":[{"text":"The api supplies a set of methods to request specific data from Portals.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"query.portalInfo","type":"text"}]},{"type":"paragraph","content":[{"text":"Get information about the portal.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.query.portalInfo().then(function(result) {\n console.log(result.portal.id);\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"query.user","type":"text"}]},{"type":"paragraph","content":[{"text":"Get the user object of the currently logged in user. Returns null if there is no logged in user.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.query.user().then(function(result) {\n console.log(result.user);\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"query.language","type":"text"}]},{"type":"paragraph","content":[{"text":"Get the language object of the currently used language.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.query.language().then(function(result) {\n console.log(result.language);\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"query.token","type":"text"}]},{"type":"paragraph","content":[{"text":"Returns the Portals Api token, which can be used in external software to additionally validate the user via EFS web service.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.query.token().then(function(result) {\n console.log(result.token);\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"If the user is logged in, the ","type":"text"},{"text":"token","type":"text","marks":[{"type":"em"}]},{"text":" field will contain the users api token, which you can validate by calling the following EFS web service. Otherwise, ","type":"text"},{"text":"token","type":"text","marks":[{"type":"em"}]},{"text":" will be an empty string.","type":"text"}]},{"type":"codeBlock","content":[{"text":"portal.users.getUserDataByToken","type":"text"}]},{"type":"paragraph","content":[{"text":"If the token is valid the userId and portalId is returned. Otherwise an exception is thrown. Please refer to the web services documentation for more details on this service call.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"query.deviceInfo","type":"text"}]},{"type":"paragraph","content":[{"text":"Get information about the client device.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.query.deviceInfo().then(function(result) {\n console.log(result.device.isMobile);\n});","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"query.ajax (reserved for future use)","type":"text"}]},{"type":"paragraph","content":[{"text":"Makes an ajax call to the internal portals server API and returns the result. Since Portals itself does not provide a public portals server API, this function is reserved for future use.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.query\n .ajax('GET', '/api/portal/client/pages')\n .then(function(result) {\n console.log(result);\n })\n .catch(function(error) {\n console.log(error);\n });","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Trigger actions in Portals","type":"text"}]},{"type":"paragraph","content":[{"text":"The api supplies a set of methods to trigger specific actions in Portals.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"trigger.height","type":"text"}]},{"type":"paragraph","content":[{"text":"Set the iFrames height to a specified value, given as a string including the unit.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.trigger.height('300px');","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"trigger.autoHeight","type":"text"}]},{"type":"paragraph","content":[{"text":"Set the iFrames height to the height of its content. This is done once per call, not repeatedly. So you have to react to resize events yourself.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.trigger.autoHeight();","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"trigger.logout","type":"text"}]},{"type":"paragraph","content":[{"text":"Log out the current user from Portals and thus redirect to the configured landing page. The iFrame will be removed from the DOM by this opreation.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.trigger.logout();","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"trigger.route","type":"text"}]},{"type":"paragraph","content":[{"text":"Redirect to the given page slug. The iFrame will be removed from the DOM by this opreation.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.trigger.route('targetPageSlug');","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Accessing MySight instances in Portals","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":15.0},"content":[{"type":"media","attrs":{"width":220,"id":"26ae3c08-f4be-4cdb-bd8f-eb1657c9b277","collection":"contentId-1083768859","type":"file","height":124}}]},{"type":"paragraph","content":[{"text":"There are a number of methods to interact with Tableau in a MySight module. For all of these you need the ","type":"text"},{"text":"pageModuleIdentifier","type":"text","marks":[{"type":"em"}]},{"text":" of a MySight module to target your requests. This identifier is set in the Portals CMS in the settings for the MySight page module and can be reused on other pages for the same or even different Tableau instances.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizGetIsReady","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets whether the onFirstInteractive event has been fired yet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizGetIsReady(pageModuleIdentifier)\n .then(function(ready) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizGetAreTabsHidden","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets whether the tabs are hidden or not.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizGetAreTabsHidden(pageModuleIdentifier)\n .then(function(hidden) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizGetIsToolbarHidden","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets whether the tabs are hidden or not.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizGetIsToolbarHidden(pageModuleIdentifier)\n .then(function(hidden) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizGetUrl","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the url of the viz.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizGetUrl(pageModuleIdentifier)\n .then(function(url) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizGetCurrentUrl","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the current url of the viz.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizGetCurrentUrl(pageModuleIdentifier)\n .then(function(currentUrl) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizGetIsHidden","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets whether the viz is hidden or not.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizGetIsHidden(pageModuleIdentifier)\n .then(function(hidden) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizShow","type":"text"}]},{"type":"paragraph","content":[{"text":"Shows the viz.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizShow(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizHide","type":"text"}]},{"type":"paragraph","content":[{"text":"Hides the viz.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizHide(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizDispose","type":"text"}]},{"type":"paragraph","content":[{"text":"Disposes the viz.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizDispose(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizGetAreAutomaticUpdatesPaused","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the status of automatic updates.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizGetAreAutomaticUpdatesPaused(pageModuleIdentifier)\n .then(function(paused) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizPauseAutomaticUpdates","type":"text"}]},{"type":"paragraph","content":[{"text":"Pauses automatic updates.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizPauseAutomaticUpdates(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizResumeAutomaticUpdates","type":"text"}]},{"type":"paragraph","content":[{"text":"Resumes automatic updates.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizResumeAutomaticUpdates(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizToggleAutomaticUpdates","type":"text"}]},{"type":"paragraph","content":[{"text":"Toggles automatic updates.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizToggleAutomaticUpdates(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizRevertAll","type":"text"}]},{"type":"paragraph","content":[{"text":"Restores the initial state. Note that url parameters will be ignored in this operation and as such the restored state may differ from the real initial state.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizRevertAll(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizRefreshData","type":"text"}]},{"type":"paragraph","content":[{"text":"Refreshes data from the server.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizRefreshData(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizShowDownloadWorkbookDialog","type":"text"}]},{"type":"paragraph","content":[{"text":"Shows the download workbook dialog.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizShowDownloadWorkbookDialog(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizShowExportImageDialog","type":"text"}]},{"type":"paragraph","content":[{"text":"Shows the export image dialog.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizShowExportImageDialog(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizShowExportPDFDialog","type":"text"}]},{"type":"paragraph","content":[{"text":"Shows the export PDF dialog.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizShowExportPDFDialog(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizShowExportDataDialog","type":"text"}]},{"type":"paragraph","content":[{"text":"Shows the export data dialog for the current or a specific sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizShowExportDataDialog(pageModuleIdentifier, sheetName)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizShowExportCrossTabDialog","type":"text"}]},{"type":"paragraph","content":[{"text":"Shows the export cross tab dialog for the current or a specific sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizShowExportCrossTabDialog(pageModuleIdentifier, sheetName)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizShowShareDialog","type":"text"}]},{"type":"paragraph","content":[{"text":"Shows the share dialog for the current or a specific sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizShowShareDialog(pageModuleIdentifier, sheetName)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.vizSetFrameSize","type":"text"}]},{"type":"paragraph","content":[{"text":"Sets the vizs frame size. Note that the min-width might be set to 100% by Portals, taking precedence over any width that is set here.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.vizSetFrameSize(pageModuleIdentifier, width, height)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetName","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the name of the workbook.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetName(pageModuleIdentifier)\n .then(function(name) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetSheetsInfo","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets information about all sheets.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetSheetsInfo(pageModuleIdentifier)\n .then(function(sheetsInfo) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetActiveSheetName","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the name of the active sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetActiveSheetName(pageModuleIdentifier)\n .then(function(name) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetActiveSheetIndex","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the index of the active sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetActiveSheetIndex(pageModuleIdentifier)\n .then(function(index) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookActivateSheet","type":"text"}]},{"type":"paragraph","content":[{"text":"Actives a sheet by its name or index.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookActivateSheet(pageModuleIdentifier, sheetNameOrIndex)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookRevertAll","type":"text"}]},{"type":"paragraph","content":[{"text":"Restores the initial state of the workbook. Note that url parameters will be ignored in this operation and as such the restored state may differ from the real initial state.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookRevertAll(pageModuleIdentifier)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterNames","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets a list of the parameter names.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterNames(pageModuleIdentifier)\n .then(function(names) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterCurrentValue","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the current value of a parameter.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterCurrentValue(pageModuleIdentifier, parameterName)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterDataType","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the data type of a parameter.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterDataType(pageModuleIdentifier, parameterName)\n .then(function(dataType) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterAllowableValuesType","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the type of allowable values of a parameter.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterAllowableValuesType(pageModuleIdentifier, parameterName)\n .then(function(allowableValuesType) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterAllowableValues","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets a list of allowable values of a parameter.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterAllowableValues(pageModuleIdentifier, parameterName)\n .then(function(allowableValues) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterMinValue","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the min value of a parameter.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterMinValue(pageModuleIdentifier, parameterName)\n .then(function(minValue) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterMaxValue","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the max value of a parameter.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterMaxValue(pageModuleIdentifier, parameterName)\n .then(function(maxValue) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterStepSize","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the step size of a parameter.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterStepSize(pageModuleIdentifier, parameterName)\n .then(function(stepSize) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookGetParameterDateStepPeriod","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the date step period of a parameter.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.mySight.workbookGetParameterDateStepPeriod(pageModuleIdentifier, parameterName)\n .then(function(dateStepPeriod) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.workbookChangeParameterValue","type":"text"}]},{"type":"paragraph","content":[{"text":"Sets a parameter to a given value.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.workbookChangeParameterValue(pageModuleIdentifier, parameterName, value)\n .then(function(newValue) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetName","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the name of a sheet by its index.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetName(pageModuleIdentifier)\n .then(function(name) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetIndex","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the index of a sheet by its name.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetIndex(pageModuleIdentifier)\n .then(function(index) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetIsActive","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets whether a sheet is active or not.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetIsActive(pageModuleIdentifier, sheetNameOrIndex)\n .then(function(active) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetIsHidden","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets whether a sheet is hidden or not.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetIsHidden(pageModuleIdentifier, sheetNameOrIndex)\n .then(function(hidden) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetType","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the type of the currently active or a specific sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetType(pageModuleIdentifier, sheetNameOrIndex)\n .then(function(type) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetUrl","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the url of the currently active or a specific sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetUrl(pageModuleIdentifier, sheetNameOrIndex)\n .then(function(url) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetSize","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the size of the currently active or a specific sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetSize(pageModuleIdentifier, sheetNameOrIndex)\n .then(function(size) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetChangeSize","type":"text"}]},{"type":"paragraph","content":[{"text":"Sets the size of the active sheet.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetChangeSize(pageModuleIdentifier, sheetSizeOptions)\n .then(function() {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetGetFilters","type":"text"}]},{"type":"paragraph","content":[{"text":"Gets the filters of a sheet specified by its name.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetGetFilters(pageModuleIdentifier, sheetName)\n .then(function(filters) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetApplyFilter","type":"text"}]},{"type":"paragraph","content":[{"text":"Applies the filter for a sheet specified by its name.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetApplyFilter(pageModuleIdentifier, sheetName, fieldName, values, updateType, options)\n .then(function(fieldName) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetApplyRangeFilter","type":"text"}]},{"type":"paragraph","content":[{"text":"Applies the range filter for a sheet specified by its name.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetApplyRangeFilter(pageModuleIdentifier, sheetName, fieldName, range)\n .then(function(fieldName) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetApplyRelativeDateFilter","type":"text"}]},{"type":"paragraph","content":[{"text":"Applies the relative date filter for a sheet specified by its name.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetApplyRelativeDateFilter(pageModuleIdentifier, sheetName, fieldName, options)\n .then(function(fieldName) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetApplyHierarchicalFilter","type":"text"}]},{"type":"paragraph","content":[{"text":"Applies the hierarchical filter for a sheet specified by its name.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetApplyHierarchicalFilter(pageModuleIdentifier, sheetName, fieldName, values, options)\n .then(function(fieldName) {\n ...\n });","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"mySight.sheetClearFilter","type":"text"}]},{"type":"paragraph","content":[{"text":"Clears the filter for a sheet specified by its name.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.mySight.sheetClearFilter(pageModuleIdentifier, sheetName, fieldName)\n .then(function(fieldName) {\n ...\n });","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Listening to MySight Tableau events","type":"text"}]},{"type":"paragraph","content":[{"text":"The api supports registering for a number of Tableau events. The supported events are:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FIRST_INTERACTIVE","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"VIZ_RESIZE","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"TAB_SWITCH","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FILTER_CHANGE","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PARAMETER_VALUE_CHANGE","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"MARKS_SELECTION","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"To register a listener for an event use the apis bus methods together with the apis tableau event constants:","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.bus.subscribe(\n Questback.portalsApi.mySight.tableauEventFirstInteractive, function(event) {\n console.log(event);\n});\n\nQuestback.portalsApi.bus.subscribe(\n Questback.portalsApi.mySight.tableauEventVizResize, function(event) {\n console.log(event);\n});\n\nQuestback.portalsApi.bus.subscribe(\n Questback.portalsApi.mySight.tableauEventFilterChange, function(event) {\n console.log(event);\n});\n\nQuestback.portalsApi.bus.subscribe(\n Questback.portalsApi.mySight.tableauEventTabSwitch, function(event) {\n console.log(event);\n});\n\nQuestback.portalsApi.bus.subscribe(\n Questback.portalsApi.mySight.tableauEventParameterValueChange, function(event) {\n console.log(event);\n});\n\nQuestback.portalsApi.bus.subscribe(\n Questback.portalsApi.mySight.tableauEventMarksSelection, function(event) {\n console.log(event);\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that you will receive events coming from any MySight Tableau instance on the page, so upon receiving an event you might have to make sure that you are only handling events coming from a specific instance by checking the ","type":"text"},{"text":"pageModuleIdentifier","type":"text","marks":[{"type":"em"}]},{"text":" in the ","type":"text"},{"text":"event","type":"text","marks":[{"type":"em"}]},{"text":" object.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"Questback.portalsApi.bus.subscribe(\n Questback.portalsApi.mySight.tableauEventVizResize, function(event) {\n if (event.mysight.pageModuleIdentifier === 'page-module-identifier-to-handle') {\n // Do something\n }\n});","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Use Portals styles","type":"text"}]},{"type":"paragraph","content":[{"text":"You can use Portals CSS styles by importing its stylesheets into your iframe. The following examples will guide you through the setup process.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Retrieve file paths","type":"text"}]},{"type":"paragraph","content":[{"text":"First you need to get the paths of the stylesheet files and font definitions:","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.initialize().then(function() {\n Questback.portalsApi.query.portalInfo().then(function(result) {\n // Continue here with step 7.2\n });\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"result","type":"text","marks":[{"type":"em"}]},{"text":" parameter will contain the necessary information in its ","type":"text"},{"text":"layout","type":"text","marks":[{"type":"em"}]},{"text":" field:","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n portal: {...},\n layout: {\n customCss: \"\n portalsCss: \"\n extensionCss: \"\n fontCss: \"\n fontDefinition: \"'Lato', sans-serif\",\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"These paths do not change for a given portal (besides the value of the cachebuster parameter called ","type":"text"},{"text":"v","type":"text","marks":[{"type":"em"}]},{"text":"), so it is possible to retrieve them once, store them and hardcode them into your code, to save postMessage requests and improve startup times a little.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Importing the extension stylesheet","type":"text"}]},{"type":"paragraph","content":[{"text":"After retrieving the stylesheet urls you need to import the files by adding ","type":"text"},{"text":"link","type":"text","marks":[{"type":"em"}]},{"text":" tags into your documents ","type":"text"},{"text":"head","type":"text","marks":[{"type":"em"}]},{"text":":","type":"text"}]},{"type":"codeBlock","content":[{"text":"var head = document.getElementsByTagName('head')[0];\nvar linkExtension = document.createElement('link');\nlinkExtension.setAttribute('rel', 'stylesheet');\nlinkExtension.setAttribute('type', 'text/css');\nlinkExtension.setAttribute('href', result.layout.extensionCss);\nhead.appendChild(linkExtension);","type":"text"}]},{"type":"paragraph","content":[{"text":"You should note that it takes some time to retrieve the file from the server, so there is a short time in which your application is rendered without the styles in the file. You might want to prevent your application from beeing shown to the user before the above code has been executed.","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"extension.css","type":"text","marks":[{"type":"em"}]},{"text":" is a subset of the portals stylesheet and contains the necessary styles for the most common use cases. If you want to include the complete portals stylesheet you can import ","type":"text"},{"text":"result.layout.portalsCss","type":"text","marks":[{"type":"em"}]},{"text":" instead of ","type":"text"},{"text":"result.layout.extensionCss","type":"text","marks":[{"type":"em"}]},{"text":". But be aware that this might introduce conflicts with existing styles in your application.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Importing the custom stylesheet","type":"text"}]},{"type":"paragraph","content":[{"text":"If you have added custom css in the ","type":"text"},{"text":"Look & Feel","type":"text","marks":[{"type":"em"}]},{"text":" section of the CMS, that contains styles which you want to apply to you application, then you should import the ","type":"text"},{"text":"custom.css","type":"text","marks":[{"type":"em"}]},{"text":" file, too.","type":"text"}]},{"type":"codeBlock","content":[{"text":"var linkCustom = document.createElement('link');\nlinkCustom.setAttribute('rel', 'stylesheet');\nlinkCustom.setAttribute('type', 'text/css');\nlinkCustom.setAttribute('href', result.layout.customCss);\nhead.appendChild(linkCustom);","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Importing the portals default font","type":"text"}]},{"type":"paragraph","content":[{"text":"To use the same font as your portal use the following code:","type":"text"}]},{"type":"codeBlock","content":[{"text":"if (result.layout.fontCss) {\n var linkFont = document.createElement('link');\n linkFont.setAttribute('rel', 'stylesheet');\n linkFont.setAttribute('type', 'text/css');\n linkFont.setAttribute('href', result.layout.fontCss);\n head.appendChild(linkFont);\n\n // Apply font-family definition\n var body = document.getElementsByTagName('body')[0];\n body.style.fontFamily = result.layout.fontDefinition;\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Using the styles","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"extension.css","type":"text","marks":[{"type":"em"}]},{"text":" contains classes for the most common use cases.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Color variables","type":"text"}]},{"type":"codeBlock","content":[{"text":"/* Color variables definitions */\n:root {\n --ext-primary-color: #006BFE;\n --ext-secondary-color: #606c76;\n --ext-success-color: #2ccc76;\n --ext-warning-color: #fbbf5f;\n --ext-danger-color: #fd6e72;\n --ext-info-color: #006bff;\n --ext-text-color: #444444;\n --ext-sidebar-background-color: #0a061d;\n --ext-sidebar-text-color: #ffffff;\n}","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Type color classes","type":"text"}]},{"type":"paragraph","content":[{"text":"Classes exist for the most common type and property combinations:","type":"text"}]},{"type":"codeBlock","content":[{"text":".ext-text-primary\n.ext-text-secondary\n.ext-text-success\n.ext-text-warning\n.ext-text-danger\n.ext-text-info\n\n.ext-background-primary\n.ext-background-secondary\n.ext-background-success\n.ext-background-warning\n.ext-background-danger\n.ext-background-info\n\n.ext-border-primary\n.ext-border-secondary\n.ext-border-success\n.ext-border-warning\n.ext-border-danger\n.ext-border-info","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Profile background classes","type":"text"}]},{"type":"paragraph","content":[{"text":"The profile background classes exist, too:","type":"text"}]},{"type":"codeBlock","content":[{"text":".ext-profile-background-0\n.ext-profile-background-1\n.ext-profile-background-2\n.ext-profile-background-3\n.ext-profile-background-4\n.ext-profile-background-5\n.ext-profile-background-6\n.ext-profile-background-7\n.ext-profile-background-8\n.ext-profile-background-9","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Other classes","type":"text"}]},{"type":"codeBlock","content":[{"text":".ext-text-color\n.ext-sidebar-background\n.ext-sidebar-text","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Buttons","type":"text"}]},{"type":"paragraph","content":[{"text":"You can style your buttons by using the portals button classes:","type":"text"}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"The button size can be set by adding one of the following classes:","type":"text"}]},{"type":"codeBlock","content":[{"text":"btn--xs\nbtn--sm\nbtn--md\nbtn--lg","type":"text"}]},{"type":"paragraph","content":[{"text":"The type can be set by adding one the following classes:","type":"text"}]},{"type":"codeBlock","content":[{"text":"btn--default\nbtn--primary\nbtn--secondary\nbtn--cancel\nbtn--clear\nbtn--success\nbtn--warning\nbtn--danger\nbtn--info\nbtn--contrast\nbtn--transparent","type":"text"}]},{"type":"paragraph","content":[{"text":"To enable hover effects, add the following class:","type":"text"}]},{"type":"codeBlock","content":[{"text":"btn--gloss","type":"text"}]},{"type":"paragraph","content":[{"text":"To display a button as disabled, add the following class:","type":"text"}]},{"type":"codeBlock","content":[{"text":"btn--disabled","type":"text"}]},{"type":"paragraph","content":[{"text":"If the button has the \"disabled\" attribute, the styles of \"btn--disabled\" are applied automatically.","type":"text","marks":[{"type":"em"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Input fields","type":"text"}]},{"type":"paragraph","content":[{"text":"You can use styles for input fields as well. Write your markup as follows:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n \n \n This is the label\n \n

","type":"text"}]},{"type":"paragraph","content":[{"text":"Please pay attention to the order of the elements and their classes. The ","type":"text"},{"text":"oninput","type":"text","marks":[{"type":"em"}]},{"text":" event handler is required to add or remove the ","type":"text"},{"text":"input-filled","type":"text","marks":[{"type":"em"}]},{"text":" class according to the inputs value. If your input receives an initial value you have to add the ","type":"text"},{"text":"input-filled","type":"text","marks":[{"type":"em"}]},{"text":" class manually.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Selectboxes","type":"text"}]},{"type":"paragraph","content":[{"text":"You can use native html selectboxes and they will be styled as close as possible to the original portals selectboxes. As those are generated by JavaScript, an exact replication is not possible.","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n \n \n This is the label\n \n

","type":"text"}]},{"type":"paragraph","content":[{"text":"As native html selectboxes always have a value selected, the ","type":"text"},{"text":"input-filled","type":"text","marks":[{"type":"em"}]},{"text":" class is always set on the ","type":"text"},{"text":"select","type":"text","marks":[{"type":"em"}]},{"text":" element.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Opening a dialog in Portals","type":"text"}]},{"type":"paragraph","content":[{"text":"The portalsApi has four methods that give you the ability to open a dialog outside of the scope of your iframe.","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.trigger.openDialog(text, title)\nQuestback.portalsApi.trigger.openConfirmDialog(text, title)\nQuestback.portalsApi.trigger.openIframeDialog(url, title, height, heightUnit)\nQuestback.portalsApi.trigger.openIframeConfirmDialog(url, title, height, heightUnit)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Dialog buttons","type":"text"}]},{"type":"paragraph","content":[{"text":"The methods ","type":"text"},{"text":"openDialog","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"openIframeDialog","type":"text","marks":[{"type":"em"}]},{"text":" open a dialog with a single \"Close\" button. The corresponding methods ","type":"text"},{"text":"openConfirmDialog","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"openIframeConfirmDialog","type":"text","marks":[{"type":"em"}]},{"text":" open a dialog with a \"Cancel\" and an \"Ok\" button.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Text dialogs","type":"text"}]},{"type":"paragraph","content":[{"text":"The methods ","type":"text"},{"text":"openDialog","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"openConfirmDialog","type":"text","marks":[{"type":"em"}]},{"text":" take a string as first parameter, which is the text shown in the main area of the dialog. The title is optional.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Iframe dialogs","type":"text"}]},{"type":"paragraph","content":[{"text":"The methods ","type":"text"},{"text":"openIframeDialog","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"openIframeConfirmDialog","type":"text","marks":[{"type":"em"}]},{"text":" render an iframe in the main area of the dialog with the url given at the first parameter. The ","type":"text"},{"text":"title","type":"text","marks":[{"type":"em"}]},{"text":", ","type":"text"},{"text":"height","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"heightUnit","type":"text","marks":[{"type":"em"}]},{"text":" are optional. The paramters ","type":"text"},{"text":"height","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"heightUnit","type":"text","marks":[{"type":"em"}]},{"text":" define the height of the iframe in the dialog.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Simple call","type":"text"}]},{"type":"paragraph","content":[{"text":"The simplest way to open a dialog is by calling one of the dialog methods, give a text/url and not worry about any events:","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.trigger.openDialog('This is a simple dialog!');","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Handle dialog close","type":"text"}]},{"type":"paragraph","content":[{"text":"The dialog can either be closed or canceled/accepted and this event can be handled by implementing Promise methods, like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.trigger.openDialog('This is a simple dialog!')\n .then(function() {\n console.log(\"Dialog has been closed\");\n });","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"confirm","type":"text","marks":[{"type":"em"}]},{"text":" dialogs make use of the ","type":"text"},{"text":"then","type":"text","marks":[{"type":"em"}]},{"text":" and ","type":"text"},{"text":"catch","type":"text","marks":[{"type":"em"}]},{"text":" methods:","type":"text"}]},{"type":"codeBlock","content":[{"text":"Questback.portalsApi.trigger.openConfirmDialog('This is a confirmation dialog!')\n .then(function() {\n console.log(\"Dialog closed by ok button\");\n })\n .catch(function() {\n console.log(\"Dialog closed by cancel button\");\n });","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"catch","type":"text","marks":[{"type":"em"}]},{"text":" method does not indicate that an error happened, it just tells you about the way the dialog was closed. Both methods do not get any parameters. This means that no data from the dialogs iframe is transported back to the calling iframe.","type":"text"}]},{"type":"paragraph","content":[{"text":"If you want to transport data between the iframes or trigger actions in the other iframe make use of the PortalsApi's message bus functionality, documented under ","type":"text"},{"text":"Using the Portals message bus","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"paragraph"}],"version":1}

Browser not supported