Dear Community User! We have started the migration process.
This community is now in READ ONLY mode.
Read more: Important information on the platform change.

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

Modifying an Existing Widget

Modifying an Existing Widget

Sgilk
Frequent Contributor

Is there a method of editing an existing WebIQ widget, rather than creating a custom widget from a blank template?

For example, I would like to add some event handling to a flex layout container. Can I create a custom widget using the existing widget as a starting point? I would like to keep the configuration options in the WebIQ Designer.

Sgilk_1-1652130342205.png

7 REPLIES 7

webiq-sk
Frequent Contributor

What kind of event handling are you trying to implement? Maybe there's an easier or better way to achieve it.

Sgilk
Frequent Contributor

I am trying to develop a library of custom widgets, so I'd like to understand this in depth rather than find a solution to this specific example.

For this example, lets say swipe events. I accomplished this using a local script but I'd like to package this code within the widget itself for ease of implementation.

CodeShepherd
Community Moderator
Community Moderator

Is this still an issue or can this topic be closed?

Sgilk
Frequent Contributor

Someone correct me if I'm wrong, but it seems that the bundled widget source code is contained in the project workspace/js/controls-bundle.js file. Individual widget source code is unavailable.

webiq-sk
Frequent Contributor

That's only partly true. A widget consist of HTML, JavaScript, CSS (LESS) code and maybe some images like icons etc.

These are distributed amongst the corresponding directory inside the HMI project (e.g. pics/system/controls/alarm-history contains the icons for the Alarm List widget). Only the JavaScript code of all WebIQ widgets is bundled inside the controls-bundle.js file.

Sgilk
Frequent Contributor

I'll accept this answer as the current solution. As a recommendation, it would be nice if widget source code (including html,css, icons etc.) could be downloaded and modified from WebIQ Designer.

webiq-sk
Frequent Contributor

We can provide these files on request, however we discourage using our widgets as a base and creating derivatives normally because that way you will not benefit from possible bug fixes in the future.

That's why we're not offering them publically as most of the time CSS changes are sufficient to change widgets for most customers and should be used instead.

 

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