UI Namespace Tableau Extension changes not saving in Tableau Server

Question

I was working on an extension similar to UI Namespace Sample extension (Github Link) provided by Tableau.

I have hosted the files in the application server (https enabled) and pointing the trex file to the files hosted there.

I am able to drag the extension to Tableau Desktop, select the input from the dialog box and the page refreshes based on the input provided.

After I save the dashboard and publish it to the tableau server, I am not able to see the changes saved before publishing. It comes back to the initial state "Configure extension to Proceed".

I tried editing it directly in Tableau Server but still resulted in the same issue.

The changes are not being saved when the workbook is published.

Could you please let me know if I am missing something or if anyone had the same issue able to resolve it?

Sanjay Sanjay · Accepted Answer · 2018-12-06T03:46:48

After research and code changes, I have found the fix for the issue.

In the UI Namespace example, we need to include a function to check previous saved settings and populate UI based on that. You can see the settings saved by opening the .twb file.

Previously only selected data sources was saved as the settings. But I have included a code to save the selected interval as the setting in addition to data sources. This will be useful to retain the state of the interval when the user clicks on configure next time.

Code snippet for checking if the settings already present in uiNamespace.js:

$(document).ready(function () {
    // When initializing an extension, an optional object is passed that maps a special ID (which
    // must be 'configure') to a function.  This, in conjuction with adding the correct context menu
    // item to the manifest, will add a new "Configure..." context menu item to the zone of extension
    // inside a dashboard.  When that context menu item is clicked by the user, the function passed
    // here will be executed.	
    tableau.extensions.initializeAsync({'configure': configure}).then(function () {
      // First, check for any saved settings and populate our UI based on them.
      checkForSettings(tableau.extensions.settings.getAll());
    }, function (err) {
      // Something went wrong in initialization
      console.log('Error while Initializing: ' + err.toString());
    })
	.then(function() { 
      // This event allows for the parent extension and popup extension to keep their
      // settings in sync.  This event will be triggered any time a setting is
      // changed for this extension, in the parent or popup (i.e. when settings.saveAsync is called).
      tableau.extensions.settings.addEventListener(tableau.TableauEventType.SettingsChanged, (settingsEvent) => {
        updateExtensionBasedOnSettings(settingsEvent.newSettings)
      });
    });
  });
  
  function checkForSettings (settings) {
	if(Object.keys(settings).length > 0)
	{
		updateExtensionBasedOnSettings(settings);
		selectedInterval = JSON.parse(settings.intervalCount);
		$('#interval').text(selectedInterval);	  
		setupRefreshInterval(selectedInterval);
		defaultIntervalInMin = selectedInterval;
		$('#inactive').hide();
		$('#active').show();
	}
	
  }

Code snippet for saving the selected interval as settings in uiNamespaceDialog.js:

function closeDialog() {
    let currentSettings = tableau.extensions.settings.getAll();
    tableau.extensions.settings.set(datasourcesSettingsKey, JSON.stringify(selectedDatasources));
	tableau.extensions.settings.set(intervalCountKey, JSON.stringify($('#interval').val()));

    tableau.extensions.settings.saveAsync().then((newSavedSettings) => {
      tableau.extensions.ui.closeDialog($('#interval').val());
    });
  }

The full code is available in GitHub. Now once we make changes in Tableau Desktop and publish it to Tableau Server, the configuration will be saved.

This changes will also solve the web editing issue (editing the extension directly in tableau server) .

UI Namespace Tableau Extension changes not saving in Tableau Server

1 Answers