cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

IFrame: Source URL as a variable?

IFrame: Source URL as a variable?

LunatiX
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?

LunatiX_0-1657013694980.png

 

4 REPLIES 4

bostroemc
Occasional Contributor

See similar thread here: https://developer.community.boschrexroth.com/t5/Smart-HMI-WebIQ-Designer-and/Inserting-Variable-into...

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.

HmiGuide
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 ctrl.name
        // For more info see: Widget Name
        // https://www.smart-hmi.com/user/download/deliver/docs/documentation-dev-visuals-widget-naming-2.12-6134/index.html
        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"
    HmiGuide_0-1659615420286.png
  • Copy files into this folder (e.g. readme.pdf)
  • src link to display file: _docs/readme.pdf

alnapi
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,

HmiGuide
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. 

HmiGuide_1-1709707198646.png

 

 

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist