How do I display an html file with pipedream

Help
1

I have an html file in one of my Dropbox folders. I want to display the file and input information via this html file, and then process that information to other triggers/actions in my workflow.

I can use Dropbox to download the contents of the html file, but I need it to display as if it is generated by a browser. How do I do that?

On my phone, the Dropbox app allows me to view the file as if it was in a browser when I open it. How do I get the Dropbox api calls to perform the same way?

Or should I be using another app that allows me to view the html file?

Thanks,

Scott.

2

@sjn001tvh what is the workflow trigger in this case that would display the HTML page and prompt you for input? Would you simply want to visit this page directly (loading the file from Dropbox via Pipedream)?

If so, you can load HTML from a Pipedream HTTP endpoint. Try copying this workflow, add a step to fetch the HTML file from Dropbox, and replace the raw HTML in my workflow with the contents of that file (loaded as a string).

Let me know if that helps!

3

Hi Dylan, thanks again for your response. Here’s the objective. Each step in my workflow is described below. However, if you skip to the last step the result is what I’m trying to correct. After your input, I’m hoping that this will let you see what I’m missing and how to show the html file in UI format.

Step 1. Set a trigger in Dropbox to sense a new file in the folder shown below.
Step 2. Retrieve the downloaded contents of a parameter file which shows the path or action that I want to execute if the name of file matches a pattern, and the file extensions match. Step 3. If the file from steps.trigger matches the pattern, then return the path or the html file name
Step 4. If the response to Step 3 is an html file, display html file and end process. If not, the move the file to the appropriate directory.

However, what I’m receiving is the content of the html file, and not the browser execution of it.

Step 1.
steps.trigger

steps.trigger.raw_event{12}
.tag:file
client_modified:2021-06-22T23:38:04Z
content_hash203ef8b7226dbd0287ebc1474145a2aadeab5df0f0e549595c12fd5faf1db350
id:id:D0IfSEO_aWAAAAAAAAACqw
is_downloadable:true
linkhttps://content.dropboxapi.com/apitl/1/xxxxxxxx
name:p.txt
path_display:/ClickUp_WSFolders/Projects/p.txt
path_lower:/clickup_wsfolders/projects/p.txt
rev:5c5634807fda433e41241
server_modified:2021-06-22T23:38:04Z
size:58

Step 2.
steps.dropbox_downloadParamFile

async (steps, events, auths) => {
var x_paramFile = “/WorkFlowApps_ParamFiles/Dropbox_API_ProjectsParams.def”
console.log (“x_paramFile = " + x_paramFile)
const params = {
“arg”: {
“path”: x_paramFile,
}
}
try {
this.resp = await require(”@pipedreamhq/platform").axios(this, {
method: “get”,
url: https://content.dropboxapi.com/2/files/download,
headers: {
Authorization: Bearer ${auths.dropbox.oauth_access_token},
},
params,
})
} catch (err) {
this.err = err
$end(“File not found…”)
}
}

steps.dropbox_downloadParamFile.resp

Dropbox_API_ProjectsParams.def

>> indicates move file to Directory

= indicates output file to *.[ext] (All output files are saved in WorkFlowMasterStartup directory

if output flow is an HTML file open file.

#File: ##-*.txt | /ClickUp_WSFolders**strong text

File: p.txt | /WorkFlowApps_ParamFiles/NewContact_PrepRecord.html

#File: expenses*.xlsx | /CloudmersiveApp
#File: expenses*.csv >> /InvoiceDataFiles

Note: All lines beginning with a # sign and empty lines are ignored. This is essentially my router definition file. I use this same format for each step in the process where I start a new trigger.

Step 3.
steps.nodejs_getRouterFile
I use console.log in order to determine if the code is effective.

a_fileLines[5] = File: p.txt | /WorkFlowApps_ParamFiles/NewContact_PrepRecord.html
x_filePatternExt = txt
x_fileExtension = txt
FileExtension matches router definition…
x_fileBasename = p
No pattern chars # or * exists in file basename…
a_routerSet[0] = | p.txt |
steps.trigger.event.name = p.txt
File Pattern MATCHED…

Note: this is the value returned…

steps.nodejs_getRouterFile.$return_value
/WorkFlowApps_ParamFiles/NewContact_PrepRecord.html

Step 4.
steps.dropbox_downloadHTMLContent

async (steps, events, auths) => {
var x_paramFile = steps.nodejs_getRouterFile.$return_value
console.log (“x_paramFile = " + x_paramFile)
const params = {
“arg”: {
“path”: x_paramFile,
}
}
try {
this.resp = await require(”@pipedreamhq/platform").axios(this, {
method: “get”,
url: https://content.dropboxapi.com/2/files/download,
headers: {
Authorization: Bearer ${auths.dropbox.oauth_access_token},
},
params,
})
} catch (err) {
this.err = err
$end(“File not found…”)
}
}

The Response:

steps.dropbox_downloadHTMLContent.resp
`

This is the Header Section...
Contact Name:
`

this is the sample page of what I want to be displayed that will allow to enter data.

Html_UIDisplay

I hope this helps. I’m just not sure what I should be entering in order to open the html file for input.

Thanks,

Scott.

PS. Is there a simplier way that I can copy the steps in my workflow. It seems that if I use Share at the top right of the screen it only shares that particular step in the process?

4

Hi Dylan,

After your response, I really didn’t understand the $respond for which you referred. So I followed the steps in the documentation and it worked exactly as it was described.

However, consider the fact that I’m processing information from my phone and one of the steps in the documentation is to copy the url created from the HTTP API call, and move into the browser. That’s the disconnect. I’m not using my laptop with a keyboard to cut and paste between apps on the computer, I’m on my phone and within the steps of a workflow.

All that Dropbox can offer is the ability to download the content, but there doesn’t seem to be an api call to directly move the html content received from the download into a browser so that I can use it as an UI.

What’s really curious about this disconnect, is that when I open Dropbox on my phone, I get a list of files and folders. When I open a .txt file, it opens it up so that I can edit the text file. If the file is an html file, it opens it as if it was called from the browser on my phone and allows me to process information as a UI, and not just display the content. Even in the Dropbox api documentation, there doesn’t seem to be an api call that opens the downloaded information as if it was opened in a browser, similar to opening the file directly from the Dropbox app.

I’m desperately looking for an app that will allow me to execute the contents of the retrieved string of an html file as if it was called directly from a browser. In essence, performing the cut and paste of the url name as described in the steps of the Pipedream HTTP API endpoint.

Yet, I admit, maybe I’m missing something really simple, but I can’t seem to grasp what it is.

Scott.

5

Hi Dylan (and others),

Additional info, as it pertains to Dropbox api calls to display html content. Here’s the explanation from Dropbox support.

The Dropbox API only offers an interface for programmatically interacting with files and folders, such as to list the contents of a folder, or download the data of a file. It does not offer UI, such as the UI for a text editor or an HTML viewer.

The Dropbox mobile apps use the API to get the file/folder metadata/data, and then present that information in relevant UI, such as a text editor or HTML viewer. Specifically, to download a file, it would call /2/files/download. Then, it would pass the downloaded data to the relevant UI component. For instance, for a .html file, it may offer the option to open that data in an HTML viewer.

If you want to replicate that sort of user experience in your own integration, you would need to implement the same sort of thing. That is, you could call /2/files/download to get the raw data for a .html file, and then you would need to pass that data into some HTML viewer. The Dropbox API doesn’t offer an HTML viewer though, so I can’t offer help on that particular step of the process. You may want to refer to the documentation for whatever platform/operating system you’re working in to see what options, if any, it offers for rendering HTML.

In essence, Dropbox api only offers the ability to download the content. That’s the reason I was looking into the browserless.io options. Just thought I would provide some updates as I continue to research a solution for this dilemma.

Scott.

6

Hi Dylan, I thought of another approach. I have a website that I have designed to display a specific html file page on the site. What I need to know is how do I activate the website as the last api call in my workflow? So the test goes like this.

Step 1. Dropbox senses a new file.
Step 2. Open the website. For the test, any website will do (HomeDepot, Lowes, etc.).

I have tried a couple of options, but nothing seems to work.

Is this possible? If so, what would be the api call?

Thanks,

Scott.

7
8

Hi Dylan,

I finally was able to get an HTML file embedded into ClickUp. They have an option for a view that allows the embedding of a URL. I have a website service that provides me a website URL and I can specify an html document which I used as the URL to the embedded URL in ClickUp.

ClickUp:
Embedded URL: https://{mywebsiteURL.com}/clickupUtilities.html

HTML file: (within the body section)

Script file clickupUtils.js:

g_mainWebhookURL = “https://enkushg7fjbt548.m.pipedream.net”

function initUI(x_opt) {

alert(“This is a test…”)

}

And whenever I view the Embedded html file, the alert message appears.

The challenge I’m experiencing is:

How do I trigger the call to g_mainWebhookURL within a javascript script file?

Do I create an async function with an await, as shown below?

function async testWebhook() {

objTest = await require("@pipedreamhq/platform").axios(this, {

method: “POST”,
url: ${g_mainWebhookURL},
})
return objTest

}

I have tried this but it doesn’t seem to work. Can you indicate what I might be missing?

Thanks,

Scott.