Skip to content

Resolve "Add Iframe element"

Afonso Silva requested to merge 2245-add-iframe-element into develop

What is in this MR

Add a new Iframe element that can be use for including an external site contents in the application as well as inline HTML. It's width is 100% by default and the height is configurable in pixels.

For maximum flexibility both URL and embed content are formulas.

I am still not 100% sure what do regarding the iframe height, if I set it up to 100% it would occupy the whole page size.

Screenshots

Empty iframe:
image

External URL:
image

Embedded HTML:
image

How to test this MR

General

  • Add a new iframe element
  • Set an external URL as the source (manually, or with a formula)
  • The provided website should appear inside the element
  • Repeat the same process for the embed option.

Mouse selection

  • Create a new iframe
  • Add an external URL
  • Try to click inside the iframe. It should not be possible
  • Publish the application
  • Try to click inside the iframe. It should respond accordingly.

Empty iframe

  • Create a new empty iframe
  • Add an external URL
  • Use the checkbox to select Embed
  • The iframe should be empty again
  • Repeat the same process in reverse

Height

  • Create a new iframe
  • Adjust the height. The iframe height should grow or shrink accordingly.
  • Try to set the height to a negative value, or a non-number string. An error message should appear below.

Note

There is this quirk that when an iframe element is present and we select another element the iframe will blink. I am not sure what is causing this, but I can spend some time investigating it.

quirks

Merge Request Checklist

  • changelog.md has been updated if required.
  • New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide

Closes #2245 (closed)

Edited by Afonso Silva

Merge request reports