Making GET/POST requests from an Omnigraffle plugin

Hello there,

I am trying to build an Omnigraffle plugin that will need to send and fetch data from our server. So far, I have managed to get the GET API calls to work using URL.fromString (mentioned on this page) as shown below:

var aURL = URL.fromString('https://reqres.in/api/users?page=2');
aURL.fetch(function(data){
  console.log(data.toString());
});

Even stackoverflow did not have any helpful information for me. @staff please advise if this is even feasible at all.

Thanks in advance.
Vikram

Build details:

Product: OmniGraffle-7.8.x
Tag: OmniGraffle/7.8/GM-v191.6
Date: 2018-07-02 11:38:40 -0700
Builder: omnibuild
Revision: 313439

Hi Vikram,

As I understand it, this feature is intended to import web hosted assets into a document. I don’t believe it will work as a way to export data. I will look into the boundaries more today to confirm.

Thanks,

Lanette

Hi Vikram,

I have confirmed that currently URL.fromString is incoming only.

I have entered a request to support 2 way communication and to document it. Someone internally is using this approach, which might work for you.

Use the template to return and use results of an app query:
https://omni-automation.com/drafts-app/template.html

(() => {
	function OmniAutomationFunction(){
		// Omni Automation script goes here
	};
	
	app.openURL(
		'lowercaseOmniAppName://localhost/omnijs-run?script=' +
		encodeURIComponent(
			'(' + OmniAutomationFunction + ')' + '()'
		)
	);
})();

Thanks,
Lanette

Hi Lanetta,

Thanks for your response. But, I don’t think that workaround will serve my purpose. I need to make GET/POST/UPDATE/DELETE requests to my web services to send and receive data (JSON mostly). The example you shared can, at best, be used for make GET requests.

Can you let me know if that is even possible? If yes, can you share an example of a POST request being made from the plugin to a web service?

Again, thank you for all your help. Appreciate it.

Vikram

The fetch() method of the URL class can be used to retrieve data from some web services, as in this example of getting today’s weather for Cupertino, California from NOAA:

var aURL = URL.fromString('https://graphical.weather.gov/xml/sample_products/browser_interface/ndfdBrowserClientByDay.php?zipCodeList=95014&format=24+hourly&numDays=1');
aURL.fetch(function(data){
  console.log(data.toString());
});

The result will be returned as XML data (Digital Weather Markup Language) containing the requested information:

<?xml version="1.0"?>
<dwml version="1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://graphical.weather.gov/xml/DWMLgen/schema/DWML.xsd">
  <head>
    <product srsName="WGS 1984" concise-name="dwmlByDay" operational-mode="official">
      <title>NOAA's National Weather Service Forecast by 24 Hour Period</title>
      <field>meteorological</field>
      <category>forecast</category>
      <creation-date refresh-frequency="PT1H">2018-07-17T18:38:32Z</creation-date>
    </product>
    <source>
      <more-information>https://graphical.weather.gov/xml/</more-information>
      <production-center>Meteorological Development Laboratory<sub-center>Product Generation Branch</sub-center></production-center>
      <disclaimer>http://www.nws.noaa.gov/disclaimer.html</disclaimer>
      <credit>https://www.weather.gov/</credit>
      <credit-logo>https://www.weather.gov/logorequest</credit-logo>
      <feedback>https://www.weather.gov/contact</feedback>
    </source>
  </head>
  <data>
    <location>
      <location-key>point1</location-key>
      <point latitude="37.30" longitude="-122.09"/>
    </location>
    <moreWeatherInformation applicable-location="point1">https://forecast-v3.weather.gov/point/37.30,-122.09</moreWeatherInformation>
    <time-layout time-coordinate="local" summarization="24hourly">
      <layout-key>k-p24h-n1-1</layout-key>
      <start-valid-time>2018-07-17T06:00:00-07:00</start-valid-time>
      <end-valid-time>2018-07-18T06:00:00-07:00</end-valid-time>
    </time-layout>
    <time-layout time-coordinate="local" summarization="12hourly">
      <layout-key>k-p12h-n2-2</layout-key>
      <start-valid-time>2018-07-17T06:00:00-07:00</start-valid-time>
      <end-valid-time>2018-07-17T18:00:00-07:00</end-valid-time>
      <start-valid-time>2018-07-17T18:00:00-07:00</start-valid-time>
      <end-valid-time>2018-07-18T06:00:00-07:00</end-valid-time>
    </time-layout>
    <time-layout time-coordinate="local" summarization="24hourly">
      <layout-key>k-p1d-n1-3</layout-key>
      <start-valid-time>2018-07-17T06:00:00-07:00</start-valid-time>
      <end-valid-time>2018-07-18T06:00:00-07:00</end-valid-time>
    </time-layout>
    <parameters applicable-location="point1">
      <temperature type="maximum" units="Fahrenheit" time-layout="k-p24h-n1-1">
        <name>Daily Maximum Temperature</name>
        <value>87</value>
      </temperature>
      <temperature type="minimum" units="Fahrenheit" time-layout="k-p24h-n1-1">
        <name>Daily Minimum Temperature</name>
        <value>57</value>
      </temperature>
      <probability-of-precipitation type="12 hour" units="percent" time-layout="k-p12h-n2-2">
        <name>12 Hourly Probability of Precipitation</name>
        <value>0</value>
        <value>0</value>
      </probability-of-precipitation>
      <weather time-layout="k-p24h-n1-1">
        <name>Weather Type, Coverage, and Intensity</name>
        <weather-conditions weather-summary="Mostly Sunny"/>
      </weather>
      <conditions-icon type="forecast-NWS" time-layout="k-p24h-n1-1">
        <name>Conditions Icons</name>
        <icon-link>http://www.nws.noaa.gov/weather/images/fcicons/few.jpg</icon-link>
      </conditions-icon>
      <hazards time-layout="k-p1d-n1-3">
        <name>Watches, Warnings, and Advisories</name>
        <hazard-conditions xsi:nil="true"/>
      </hazards>
    </parameters>
  </data>
</dwml>

Unless something’s changed in the last year or so, only GET seems to be exposed. I can imagine there were security concerns behind that decision, but I think (and still hold hope) that there will be full HTTP method support at some stage.

What I was trying to do last year has been put on hold because I need to POST in addition I GET.

Will happily be corrected!! 😉

1 Like

Here’s a shorter example of using the fetch( ) method of the URL class to get the current temperature at San Francisco Airport:

var aURL = URL.fromString('https://w1.weather.gov/xml/current_obs/KSFO.xml');
var locationName = "San Francisco Airport";
aURL.fetch(function(data){
	queryResult = data.toString();
	console.log(queryResult);
	startTag = '<temperature_string>';
	startTagOffset = queryResult.indexOf(startTag);
	endTag = '</temperature_string>'
	endTagOffset = queryResult.indexOf(endTag);
	tempString = queryResult.substring(startTagOffset + startTag.length, endTagOffset);
	new Alert(locationName,tempString).show(function(result){})
});

The query result is XML weather data that the script parses to extract the current temperature and display in an alert.

FYI, here is an extensive list of the codes for NOAA Weather Stations

Hi Sal,

Thanks for your effort. I really appreciate it. But, suppose I have to call a login service to which I need to send my username and password as POST parameters. How can I accomplish that using the URL class?

Here’s an example of a fetch POST request from the MDN JavaScript documentation:

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

Can you share the Omnigraffle plugin equivalent of this code?

Looking into POST, and will respond when I have more information.

Interesting stuff!

Sal

Here’s one more example of using the fetch( ) method of the URL class to retrieve a JSON data object from the JSONPlaceholder website:

urlStr = 'https://jsonplaceholder.typicode.com/posts/1'
url = URL.fromString(urlStr)
url.fetch(function(data){
	obj = JSON.parse(data.toString())
	console.log(obj.userId)
	console.log(obj.id)
	console.log(obj.title)
	console.log(obj.body)
})
1 Like

I’ve confirmed with engineering that at this time, the fetch( ) method of the URL class only supports retrieving data (GET) and not the ability to include header data (POST). Thanks to all for their comments and examples. – SAL

Thank you for looking into this Sal. If anyone else sees this thread and needs a way to POST, please email us a request at omnigraffle@omnigroup.com so that we can make sure your suggestion is tracked.

+1

Would love to be able to make GraphQL requests from OmniAutomation - this would require POST and the ability to add custom headers (for auth etc).