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

Adding Customize HTML Pages in WebIQ using Editor

Adding Customize HTML Pages in WebIQ using Editor

Yasir
New Poster

Hello Everyone!

Is it possible to add customize HTML pages in webiq using Visual studio code or any editor?

if yes then

what would be the project structure?


I'm adding pages in webIq but when i'll open it in text editor i'm not able to find the exact pages which i added, instead i found one HTML auto generated file which might contain all the stuff inside which i added. if this is true then  could i decrypt this file to get html pages?

any help will be much appriciated.

Thank you.

4 REPLIES 4

webiq-sk
Frequent Contributor

Hello Yasir,

WebIQ does not generate static HTML pages as WebIQ is a fully dynamic system where the corresponding views are created dynamically with JavaScript, HTML, CSS and JSON.

This means that though you could in theory edit the corresponding files this is neither supported nor recommended.

WebIQ delivers all assets through the built-in web server and all of the data is streamed via a Websocket connection.

Maybe it helps me to understand what you are trying to achieve if you could explain what exactly you are trying to do.

Regards,
Sascha Kimmel

Yasir
New Poster

Dear Sascha Kimmel,

Thank you for your reply.

The thing i understood is I can not add directly pages using code but I just wanted to know, is these any API or functions available which i could use to add HTML pages and widgets without using webIQ designer?

If yes, please guide me about it.

Secondly,
is it possible to create, add or change some files in the project structure? for example changing in the JSON files or already existing widgets/files are possible?
if yes please refer any document or something.

Regards, 
Yasir

webiq-sk
Frequent Contributor

Hello Yasir,

WebIQ has no concept of "pages", everything is created dynamically. You could create something like "pages" by using a Screen Widget, a Tab Panel widget etc., however doing that dynamically (except by using Local Scripts and Custom Widgets inside WebIQ Designer) is neither supported nor documented.

What exactly are you trying to achieve? Do you want to dynamically create your HMI? Then the way would be to use LocalScripts to achieve that.

You always need WebIQ Designer to edit the app in any case because only WebIQ Designer can load the app in the workspace where it can be edited.

Regards,
Sascha Kimmel

Dear Sascha Kimmel,

Thanks for your answer.

Yes, i want to create HMI dynamically, you talked about localscripts. That sounds interesting. I was wondering if you could explain it a bit more or guide me with the exapmle/documentation.

Regards,
Yasir 

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