Html file not showing nor downloading on mobile app

💬 Mobile
,
1

My goal: I want to display an HTML list of prices generated by a Supabase Edge Function as a Webview or downloadable file when clicking a "Right Action" button (top right of the screen) in the Retool mobile app. The button should trigger the display or download seamlessly on mobile devices.

Issue: The Right Action button does not work on the Retool mobile app. On PC, it downloads an HTML file, but on mobile, nothing happens. I’ve tried using utils.downloadFile and document.createElement('a'), but neither works. The Edge Function returns a JSON { "message": "..." }, and I need to handle this to show the HTML content.

Steps I've taken to troubleshoot:

  • Configured a Right Action with a "Run Script" to execute a download script using document.createElement('a'), which works on PC but not mobile.
  • Tried utils.downloadFile in the script, but it failed on mobile.
  • Added a Webview component and attempted to update its src with document.getElementById('webviewId').src = 'data:text/html...', but the button does nothing.
  • Checked console.log(invokePriceListFunction.data) and confirmed the JSON response is correct.
  • Ensured the Supabase Edge Function is deployed and returns a 200 status.

Additional info:

  • Cloud-hosted Retool instance.
  • No screenshots available yet, but I can provide the Edge Function code and Retool script if needed.
3

Hey @Tomas_Ottino - thanks for reaching out! This is a little belated, but one option is to use the existing HTML component if you're okay with displaying the content directly within the app.

image
image646×896 15.9 KB

4

  • Add the HTML Component: In your Retool app builder, search for and add the "HTML" component to your mobile screen, as shown in the image.image.jpg​

  • Set HTML Content: Make the HTML component display the content you get from your Supabase Edge Function. You can do this by setting the value or content property of the HTML component to the HTML string from your server or API response.​

  • Trigger with Button: Edit your "Right Action" button to update the HTML component when clicked. For example, let the button run a script that fetches the data and sets the HTML, like:

    js

    htmlComponent.value = invokePriceListFunction.data.message

    This puts your price list inside the HTML box on screen when the button is pressed.​

  • No Download Required: On mobile, showing HTML in an HTML component is much more reliable than trying to force a file download. Downloads often don't work smoothly on mobile apps, but displaying HTML directly is supported and easy.​

This way, your users can see the price list easily inside the app without any download problems.

1 Like
5

Have you had a chance to revisit this, @Tomas_Ottino?