demoive · May 1, 2020 23:15
diff --git a/Helper:PropertiesService.gs b/Helper:PropertiesService.gs

 /**
 * Creates a new top-level menu item (called: 🔬) with useful debugging options within.
 *
 * Requires a global `CONFIG.ENV` variable is set to "development".
 */
 if (CONFIG.ENV === 'development') {
  var ui = DocumentApp.getUi();
  var topMenu = ui.createMenu('🔬'); // As addon, equivalent to `ui.createAddonMenu()` (title is the Addon name)
  
  topMenu.addItem('Properties Inspector', 'inspectDocumentProperties');
  topMenu.addToUi();
 }


 /**
 * Returns the data stored in the DocumentProperties as a JSON Object.
 * If key is undefined, returns the full DocumentProperties as a JSON Object.
 *
 * @param {string} propKey (optional) The key of the stored Object.
 * @return {Object}
 */
 function getDocPropJson(propKey) {
  const documentPropertiesService = PropertiesService.getDocumentProperties();

  if (propKey) {
    return JSON.parse(documentPropertiesService.getProperty(propKey));
  }

  var documentPropertiesAll = documentPropertiesService.getProperties();

  return dataObjToJson(documentPropertiesAll);
 }


 /**
 * Stores a stringified JSON in the specified key of the DocumentProperties store.
 *
 * @param {string} propKey (required) The key of where to store the Object.
 * @param {string} jsonData (required) The JSON data to store as a string.
 */
 function setDocPropJson(propKey, jsonData) {
  const documentPropertiesService = PropertiesService.getDocumentProperties();

  documentPropertiesService.setProperty(propKey, JSON.stringify(jsonData));
 }


 /**
 * Show all Document Property data in a modal dialog of the Container's UI.
 * Also logs the formatted data using Logger.
 *
 * Unlike UserProperties and ScriptProperties, DocumentProperties are not available
 * in any UI. This provides a convinient way to view all the stored document properties
 * (https://developers.google.com/apps-script/guides/properties).
 */
 function inspectDocumentProperties() {
  const documentPropertiesAll = PropertiesService.getDocumentProperties().getProperties();
  const documentPropertiesJson = dataObjToJson(documentPropertiesAll);

  inspectJson(documentPropertiesJson, 'DocumentProperties');
 }


 /**
 * Shows the provided JSON Object in a modal dialog in the UI.
 * Also Logs the formatted value for non-UI visibility.
 *
 * @param {Object} jsonObj The JSON Object you want to see.
 * @param {string} objectName (optional) A reference name for the object.
 */
 function inspectJson(jsonObject, objectName) {
  var jsonString = JSON.stringify(jsonObject, null, 2);

  Logger.log(jsonString);

  var template = HtmlService.createTemplateFromFile('Helper/PropertiesService/template/ui/dialog-properties-inspector');

  // Expose the data within the HTML template.  
  template.data = {
    objectName: objectName,
    jsonString: jsonString,
  };

  var html = HtmlService
    //.createHtmlOutput('<pre>'+jsonString+'</pre>')
    .createHtmlOutput(template.evaluate())
    .setWidth(800)
    .setHeight(500)
  ;

  //var ui = FormApp.getUi();
  var ui = DocumentApp.getUi();
  //var ui = SpreadsheetApp.getUi();
  //ui.alert('Document Properties', jsonString, ui.ButtonSet.OK);
  //ui.showModalDialog(html, '🔬 Properties Inspector');
  ui.showModelessDialog(html, '🔬 Properties Inspector');
 }


 /**
 * Returns a Data Object, represented as a JSON Object.
 *
 * Helps to normalise Object Data in Google Apps Script, particularly the PropertiesService
 * which is stored in a mixed format:
 *
 * - Top-level: Data Object
 * - Lower-levels: Stringified JSON
 *
 * @param {Object} dataObj The PropertiesService Object, acquired from `getProperties()`.
 * @return {Object}
 */
 function dataObjToJson(dataObj) {
  var dataJson = {};

  // Builds a JSON Object from the Data Object.
  for (var key in dataObj) {
    try {
      dataJson[key] = JSON.parse(dataObj[key]);
    } catch(e) {
      Logger.log(e);
    }
  }

  return dataJson;
 }
diff --git a/Helper:PropertiesService:template:ui:dialog-properties-inspector.html b/Helper:PropertiesService:template:ui:dialog-properties-inspector.html
 <!DOCTYPE html>
 <html>
  <head>
    <base target="_top">

    <!-- Standard styling for Google Sheets (https://developers.google.com/apps-script/add-ons/css) -->
    <!-- <link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css"> -->

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.32.5/jsoneditor.min.css">
    <style>
      
    </style>
  </head>
  <body>

    <div id="jsoneditor"></div>

 <script src="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.32.5/jsoneditor.min.js"></script>
 <script>
 var container = document.getElementById('jsoneditor');

 var options = {
  name: <?= data.objectName || 'object' ?>,
  modes: [
    //'tree',
    'view',
    //'form',
    'code'
  ],
  navigationBar: false,

  // Makes the values but not the fields editable on all nodes.
  onEditable: function (node) {
    return {
      field: false,
      value: true
    };
  },
 };

 var editor = new JSONEditor(container, options);
 editor.set(JSON.parse(<?= data.jsonString ?>));
 editor.expandAll();
 </script>

  </body>
 </html>

	/**
	* Creates a new top-level menu item (called: 🔬) with useful debugging options within.
	*
	* Requires a global `CONFIG.ENV` variable is set to "development".
	*/
	if (CONFIG.ENV === 'development') {
	var ui = DocumentApp.getUi();
	var topMenu = ui.createMenu('🔬'); // As addon, equivalent to `ui.createAddonMenu()` (title is the Addon name)

	topMenu.addItem('Properties Inspector', 'inspectDocumentProperties');
	topMenu.addToUi();
	}


	/**
	* Returns the data stored in the DocumentProperties as a JSON Object.
	* If key is undefined, returns the full DocumentProperties as a JSON Object.
	*
	* @param {string} propKey (optional) The key of the stored Object.
	* @return {Object}
	*/
	function getDocPropJson(propKey) {
	const documentPropertiesService = PropertiesService.getDocumentProperties();

	if (propKey) {
	return JSON.parse(documentPropertiesService.getProperty(propKey));
	}

	var documentPropertiesAll = documentPropertiesService.getProperties();

	return dataObjToJson(documentPropertiesAll);
	}


	/**
	* Stores a stringified JSON in the specified key of the DocumentProperties store.
	*
	* @param {string} propKey (required) The key of where to store the Object.
	* @param {string} jsonData (required) The JSON data to store as a string.
	*/
	function setDocPropJson(propKey, jsonData) {
	const documentPropertiesService = PropertiesService.getDocumentProperties();

	documentPropertiesService.setProperty(propKey, JSON.stringify(jsonData));
	}


	/**
	* Show all Document Property data in a modal dialog of the Container's UI.
	* Also logs the formatted data using Logger.
	*
	* Unlike UserProperties and ScriptProperties, DocumentProperties are not available
	* in any UI. This provides a convinient way to view all the stored document properties
	* (https://developers.google.com/apps-script/guides/properties).
	*/
	function inspectDocumentProperties() {
	const documentPropertiesAll = PropertiesService.getDocumentProperties().getProperties();
	const documentPropertiesJson = dataObjToJson(documentPropertiesAll);

	inspectJson(documentPropertiesJson, 'DocumentProperties');
	}


	/**
	* Shows the provided JSON Object in a modal dialog in the UI.
	* Also Logs the formatted value for non-UI visibility.
	*
	* @param {Object} jsonObj The JSON Object you want to see.
	* @param {string} objectName (optional) A reference name for the object.
	*/
	function inspectJson(jsonObject, objectName) {
	var jsonString = JSON.stringify(jsonObject, null, 2);

	Logger.log(jsonString);

	var template = HtmlService.createTemplateFromFile('Helper/PropertiesService/template/ui/dialog-properties-inspector');

	// Expose the data within the HTML template.
	template.data = {
	objectName: objectName,
	jsonString: jsonString,
	};

	var html = HtmlService
	//.createHtmlOutput('<pre>'+jsonString+'</pre>')
	.createHtmlOutput(template.evaluate())
	.setWidth(800)
	.setHeight(500)
	;

	//var ui = FormApp.getUi();
	var ui = DocumentApp.getUi();
	//var ui = SpreadsheetApp.getUi();
	//ui.alert('Document Properties', jsonString, ui.ButtonSet.OK);
	//ui.showModalDialog(html, '🔬 Properties Inspector');
	ui.showModelessDialog(html, '🔬 Properties Inspector');
	}


	/**
	* Returns a Data Object, represented as a JSON Object.
	*
	* Helps to normalise Object Data in Google Apps Script, particularly the PropertiesService
	* which is stored in a mixed format:
	*
	* - Top-level: Data Object
	* - Lower-levels: Stringified JSON
	*
	* @param {Object} dataObj The PropertiesService Object, acquired from `getProperties()`.
	* @return {Object}
	*/
	function dataObjToJson(dataObj) {
	var dataJson = {};

	// Builds a JSON Object from the Data Object.
	for (var key in dataObj) {
	try {
	dataJson[key] = JSON.parse(dataObj[key]);
	} catch(e) {
	Logger.log(e);
	}
	}

	return dataJson;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">

	<!-- Standard styling for Google Sheets (https://developers.google.com/apps-script/add-ons/css) -->
	<!-- <link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css"> -->

	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.32.5/jsoneditor.min.css">
	<style>

	</style>
	</head>
	<body>

	<div id="jsoneditor"></div>

	<script src="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.32.5/jsoneditor.min.js"></script>
	<script>
	var container = document.getElementById('jsoneditor');

	var options = {
	name: <?= data.objectName \|\| 'object' ?>,
	modes: [
	//'tree',
	'view',
	//'form',
	'code'
	],
	navigationBar: false,

	// Makes the values but not the fields editable on all nodes.
	onEditable: function (node) {
	return {
	field: false,
	value: true
	};
	},
	};

	var editor = new JSONEditor(container, options);
	editor.set(JSON.parse(<?= data.jsonString ?>));
	editor.expandAll();
	</script>

	</body>
	</html>