Customizing your Resco app with iFrames: How to do it? [Guide]

iFrames are important user interface components in Resco’s mobile software. With them, developers can design even more user-friendly, intuitive, and visually pleasing apps. If you’re building your solution on Resco technology, you can see how to leverage iFrames in this guide. We’ve taken a closer look at one of our own apps – City Smart Services – and picked practical tips on how to approach some of the various UI and UX challenges.

What is an iFrame?

An iFrame, or “inline frame”, is an HTML element that developers use to embed documents, videos, or other web pages to their site or app. Imagine an embedded window on your webpage, or an application that is showing content from an external source. An example of an iFrame? The YouTube video showing the remote assist video calls functionality within the Resco MxDP landing page.

iFrames in Woodford are a part of the another key component for customization – forms. You can learn how to customize forms in one of our guides.

Pros and cons of iFrames

With iFrames, it is possible to integrate the functionality of various tools into your mobile project quickly. With little effort, developers can integrate third-party components into their designs and create eye-pleasing apps with advanced capabilities. However, customization can sometimes be a challenge, as it might require more time to properly adjust your iFrames. Also, flexibility in adjusting iFrame size can cause concerns if using the app on devices with various screen sizes.

How are iFrames used in Resco City Smart Services?

City Smart Services enable municipalities, councils, and local governments to collect suggestions from citizens about possible improvements, technical issues, or quality of services in their city. For this purpose, users of the app have access to a specially designed report form. There, they can describe a case in detail and include a wide range of additional information.

Part of the form is a Google Maps iFrame, which allows citizens to pinpoint the location of the reported issue. The iFrame helps to leverage the extensive functionality of Google Maps, without the need to leave the City Smart Services app. Our Multiexperience Development Platform allowed us to adjust the iFrame’s appearance, so it fits naturally into the app’s design.
First, our developers defined the size of the map that the users interact with. Citizens don’t get lost in a full-size map and there is enough space to see other app elements, which further improves the app’s usability.
We also added the search box with an autocomplete feature. So, as the citizens type in the name of a location, they see suggestions they can choose from to save time and clicks.
The autocomplete search box is an example of added functionality that would not be possible to add solely with Woodford. It is taking advantage of Google API tools for developers and Google Maps.
The last element is an address box that allows users to review the location’s address before proceeding to the next part of the incident form.

Other examples of iFrames and adding offline HTML

If you want to see another possible use case of iFrames in Resco apps, take a look at how to show an address of a contact on a map via iFrame. For sales reps, it can be beneficial to check LinkedIn Sales Navigator data directly in the CRM app.
Resco MxDP fully supports HTML iFrames thanks to the JSBridge technology that enables the interaction of custom HTML pages with Resco-based applications. In Woodford, it is also possible to add offline HTML components to your app project. This component may contain HTML, JavaScript, or CSS files, which (as the name suggests) will be displayed even without Internet connection. In this case, you have full control of what will be shown in the app, and it’s practically like adding custom code to the solution.

How to add iFrames to an app with Woodford?

If you want to utilize iFrames in your app, you can integrate the component via the Woodford configurator.
Navigate to the App Project you want to customize.
Open your project by double-clicking or hitting the Edit button in the top navigation panel.
An iFrame can be added to the Home Screen component or to Entity forms (choose Entity in the left navigation panel and then open the form you want to customize).
After selecting a form, click on the Add iFrame button in the top navigation panel. Now, choose an appropriate name and insert the URL of your iFrame.

For example, you can generate an URL for a Google Maps iFrame here.
Other available options when working with iFrames in Woodford are:

• Authenticate – if you want to use the credentials of the current mobile CRM user to authenticate on an external website. This works for Active Directory CRM authentication only.
• Delay Load – if checked, the website starts loading only after the user clicks on the iFrame tab. If not checked, the website will load immediately after the user opens a form with an IFrame.

Take advantage of iFrames in your solution

iFrames provide a flexible way of leveraging third-party solutions in your application, helping you to provide more functionality to users while maintaining a visually pleasing user interface. Components like Google Maps, LinkedIn, Youtube or any other external content can come in handy to further boost user engagement with your apps.
”
Available UI improvements don’t end with just iFrames in Woodford. You can also leverage numerous layouts, styles, color schemes, images, and more. To discover the best of these techniques, join us on September 9  for the upcoming Resco User Interface online training and learn how to tailor the look & feel of your apps in a few simple steps. If you haven’t started to customize your solution just yet, take a look on Resco MxDP platform and request a free demo to see the full power of multiexperience development.