Showing results for 
Search instead for 
Did you mean: 

IFrame: Source URL as a variable?

IFrame: Source URL as a variable?

New Contributor

I'm using the IFrame to display PDF files. Is it possible to work with variables/placeholders to change the Source URL, see picture below?




Occasional Contributor

See similar thread here:

Also, I've attached a custom widget that allows the iframe source to be a variable/item.  (This is sample code and has not been tested exhaustively.  Please contact me if you see any issues.) 

The WebIQ documentation describes how to install and use a custom widget.

Community Moderator
Community Moderator

A more basic example. How you can change the src of a iframe. Call the UI action "_iframe-src" e.g. via a button UI action.

  • sName: iframe name (e.g. root.myScreen.iframe)
  • sSource: src attribute of iframe (e.g. _docs/readme.pdf)


(function () {
    'use strict';  // all variables must be defined
    var actions = shmi.pkg("visuals.session.userActions"); //get reference to userActions object

     * UI-Action '_iframe-src' implementation
     * @param {string} parameters[0]  nameIframe name of iframe to manipulate
     * @param {string} parameters[1]  srcIframe  source string for iframe content
    actions["_iframe-src"] = function (parameters) {
        let sIframe = parameters[0];
        let ssrc=parameters[1];

        let ctrl = shmi.ctrl(sIframe); // find the 1st element with matching name
        // to find out the full name of the ctrl look into
        // For more info see: Widget Name
        if ((ctrl) && (ctrl.uiType == "iframe")) {
            ctrl.vars.iframe.setAttribute("src", sSrc);
        } else {
            alert(`Iframe with name "${sIframe}" not found`);


 To ship the displayed documents (e.g. PDF files) with the WebIQ project, copy the files into the WebIQ workspace directory:

  • Create directory "<YOUR_DATA_DIR>\workspace\_docs"
  • In WebIQ Designer About window the workspace folder is display with the label "Data directory"
  • Copy files into this folder (e.g. readme.pdf)
  • src link to display file: _docs/readme.pdf

Established Member

I'm trying to implement your example.
When I assign the UI Action to the button I cannot set the properties of the action.
Can I have a sample project to understand better?

Thank you,

Community Moderator
Community Moderator

When you create an UI-Action in the "code manager" you have to define the parameters, Just click on the "+" button after label UI-Action Parameters.