We’re excited to announce the new iFrame widget on Appsmith’s latest release (v1.6). With this, we can now embed content from other sources, such as web pages, videos, and scores of other content formats on Appsmith applications within no time!
At Appsmith, as an open-source organisation, we believe in the power of community and take member requests seriously. It’s also a part of our commitment to building in public. This iFrame feature was highly requested by our community members, prompting us to create an issue on our Github repository.
Today, we want to talk a little bit about how we got to prototyping and then delivering this widget.
First, we listed the basic requirements for an iFrame widget and the other specific functionalities we wanted to include. And yes, all the ideation and prototyping are open to the public; you can check out the Figma files! One of our contributors, Paul Li, volunteered to build the widget. Li’s submissions were then thoroughly tested on our deploy previews and then pushed into production. A working example of the collaborative engineering practices we follow here at Appsmith! 🙌
In case you’re wondering about how to set up Appsmith in the local environment and start contributing, this detailed guide will help you!
You can add the find the iFrame under the widget sections from the entity explorer inside the application. Drag and drop it onto the canvas to use it. By default, you’ll see a Wikipedia webpage, and you can change this by opening the property pane and adding a new link to the ‘Source’ property. You can also update the ‘label’ property to assign a name (title) to the content page that you wish to embed.
The iFrame widget will allow you to trigger a value when a message event is received. This can be handled by configuring the onMessageRecieved property.
Here’s how it works:
In the future, Appsmith will also provide an API that will let you access the message received from the iFrame embed.
Here is another example with a similar use case. When the developer provides auto-login to another website that they have embedded inside their new website.
Note that the control of the embedded website is paramount here and also this approach is insecure. We have allowed this assuming that the developer understands the security issues and deals with them appropriately.
You can handle certain actions when the Widget’s URL is changed using the onURLChanged property.
Here’s an example:
Let’s say you have loaded user data in the table and want to display details from there onto the website. When you click on a particular row on the table, you can change the iFrame URL to show the rest of the details on your own website using the onURLchanged property. We can also bound a trigger to execute an action whenever the URL is changed.
Hope you’ll build some super cool applications using the iFrame widget and Appsmith! If you do, don’t forget to tell us about it, we would love to feature your work! Your contributions and feedback help us make Appsmith better and we really appreciate it.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format
sadadasdasdas dsada sadas asd ad
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.