277
Views
11
Comments
[Silk UI Web] Modal + Lisbon Theme is Broken
Question
silk-ui-web
Web icon
Forge asset by OutSystems

Hi -

Using the latest version of Silk + the latest version of the Lisbon theme... it is broken. Here's what is happening in my Firefox debugger:

1. Modal.en.js is running, and throwing the error "SilkUI is undefined".

2. AFTER Modal.en.js runs, SilkUI.en.js runs and initializes the SilkUI object.

So... the questions is... what needs to be fixed so that Modal.en.js runs AFTER SilkUI.en.js runs?

J.Ja

2019-11-12 17-31-26
Justin James
 
MVP

This is also happening in Chrome.

J.Ja

2021-02-26 15-02-11
Dinis Carvalho
Staff

Hi Justin,

I wasn't able to replicate the issue in Platform 10 using Lisbon Template, which platform version are you on?

Also, can you share a small oml where you can replicate the issue?

Cheers

2024-04-24 19-28-09
Justin Babel

I've also experienced this issue with the Lisbon theme, it was in version 9.0 when trying to use certain widgets, I believe it was a section expandable inside of a web block, their JS was getting ran before SilkUI was defined, as J. Ja stated.

Unfortunately, I do not have an OML to share, but I only had a short amount of time and had to get around it by adding the copying the Silk UI JS Web block and adding it to the top of my web block in order for them to work.

I know this doesn't help a ton, but figured I'd put my experience out there as well, in case it helps.

Justin

2020-12-07 13-36-58
Alexandre Santos
Champion

Justin James wrote:

Hi -

Using the latest version of Silk + the latest version of the Lisbon theme... it is broken. Here's what is happening in my Firefox debugger:

1. Modal.en.js is running, and throwing the error "SilkUI is undefined".

2. AFTER Modal.en.js runs, SilkUI.en.js runs and initializes the SilkUI object.

So... the questions is... what needs to be fixed so that Modal.en.js runs AFTER SilkUI.en.js runs?

J.Ja


I'm not sure if this is the problem, but I had that problem sometimes too, so let's give it a try.


Are you trying to run some Silk UI widget, before the layout block, or the WidgetsForLayout widget?


Cheers,

Alexandre

2019-11-12 17-31-26
Justin James
 
MVP

Alexandre Santos wrote:

Justin James wrote:

Hi -

Using the latest version of Silk + the latest version of the Lisbon theme... it is broken. Here's what is happening in my Firefox debugger:

1. Modal.en.js is running, and throwing the error "SilkUI is undefined".

2. AFTER Modal.en.js runs, SilkUI.en.js runs and initializes the SilkUI object.

So... the questions is... what needs to be fixed so that Modal.en.js runs AFTER SilkUI.en.js runs?

J.Ja


I'm not sure if this is the problem, but I had that problem sometimes too, so let's give it a try.


Are you trying to run some Silk UI widget, before the layout block, or the WidgetsForLayout widget?


Cheers,

Alexandre


I looked at that... it is on a Web Block inside a page which uses LayoutLisbon, inside the Main Content area. I suspect that may be the issue, I'm going to move the Modal to the page, not inside the Web Block.

J.Ja

2020-12-07 13-36-58
Alexandre Santos
Champion

Did it solve your problem? :)

2019-11-12 17-31-26
Justin James
 
MVP

I cannot reproduce the behavior in a separate Espace.

I tried moving the Modal block to the page itself and that did not work.

Looking at the HTML source code makes the problem VERY clear, Modal is being loaded BEFORE SilkUI.


OutSystems: this needs a fix, pronto.

J.Ja

<link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/Icon.css?28294" type="text/css" rel="stylesheet" />
<link href="/WebPatterns/Blocks/WebPatterns/Private/Tooltipster_3_0_6.css?30524" type="text/css" rel="stylesheet" />
<link href="/WebPatterns/Blocks/WebPatterns/Javascript/SilkUI.css?30524" type="text/css" rel="stylesheet" />
<link href="/RichWidgets/Blocks/RichWidgets/jQueryUI/jQueryUIInternal.css?28294" type="text/css" rel="stylesheet" />
<link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/Feedback_Message.css?28294" type="text/css" rel="stylesheet" />
<link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/DropDownMenu.css?28294" type="text/css" rel="stylesheet" />
<link href="/iKuityCRM/Blocks/iKuityCRM/NotificationFlow/NotificationAlertContactImage.css?30752" type="text/css" rel="stylesheet" />
<link href="/Social/Blocks/Social/WidgetsAux/InfiniteScrollDiv.css?28896" type="text/css" rel="stylesheet" />
<link href="/iKuityCRM/Blocks/iKuityCRM/NotificationFlow/NotificationAlert.css?30752" type="text/css" rel="stylesheet" />
<link href="/iKuityCRM/Blocks/iKuityCRM/Common/LoginInfo.css?30752" type="text/css" rel="stylesheet" />
<link href="/iKuityCRM/Blocks/iKuityCRM/Common/Menu.css?30752" type="text/css" rel="stylesheet" />
<link href="/WebPatterns/Blocks/WebPatterns/Layout/LayoutPopup.css?30524" type="text/css" rel="stylesheet" />
<link href="/iKuityCRM/Widgets/Form/Form.css?10_0_200_0" type="text/css" rel="stylesheet" />
<link href="/iKuityCRM/Blocks/iKuityCRM/OrderFlow/EditOrderItem_WebBlock.css?30752" type="text/css" rel="stylesheet" />
<link href="/iKuityCRM/Blocks/iKuityCRM/OrderFlow/Order_WebBlock.css?30752" type="text/css" rel="stylesheet" />
    <link href="Theme.iKuityCRM.css?30752" type="text/css" rel="stylesheet" />
    <link href="/LisbonTheme/Theme.LisbonTheme.extra.css?30527" type="text/css" rel="stylesheet" />
    <script id="_OSrequestInfoScript" type="text/javascript">(function(global) { global.outsystems = global.outsystems || {};global.outsystems.internal = global.outsystems.internal || {};global.outsystems.internal.requestInfo = {visitorKey:'ec3a8989-9f9b-482b-abe8-c666485a95a4',visitKey:'fce402d8-d357-4552-af26-8b8acfde5199',sessionKey:'6bc465bf-d20e-b51e-8657-72c084df76ab',userKey:'db9e403e-0405-f28b-1b1e-6328812dc7b4',requestKey:'d4be5a02-d1b2-4ad2-a2ec-21cb7345de43',webScreenKey:'77d09b10-3a93-4159-81be-1bac4a35b6e9',webScreenName:'OrderDetail',espaceKey:'57845443-545d-4852-9ef3-51aa4750af09',espaceName:'iKuityCRM',applicationKey:'628cdb19-e614-49c5-a792-a0db0571e8e9',applicationName:'iKuity CRM',tenantKey:'1d810b7f-baa6-cf2d-ed87-206958161532',tenantName:'Users',environmentKey:'051ce67d-5415-4e70-a4a7-f99a52a217bf',environmentName:'Development',frontendKey:'$1$rPtSthG6o87N0o2nH40c9w==YwORJc8y7PPWTJauNPzIwQ=='}})(this);</script>
    <script src="_osjs.js?10_0_200_0" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/LisbonTheme/LisbonTheme/Layout_Lisbon.js?30527" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/RichWidgets/RichWidgets/DropDownMenu.en.js?28294" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/WebPatterns/Content/Modal.en.js?30524" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/WebPatterns/Javascript/SilkUICommon.en.js?30524" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/WebPatterns/Private/ToggleScript.en.js?30524" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/WebPatterns/Private/Tooltipster_3_0_6.en.js?30524" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/WebPatterns/Javascript/SilkUI.en.js?30524" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/WebPatterns/Utilities/Feedback_AjaxWait.en.js?30524" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/RichWidgets/jQueryUI/jQueryUIInternal.en.js?28294" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/RichWidgets/jQueryUI/jQueryComponents.en.js?28294" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Blocks/RichWidgets/RichWidgets/Feedback_Message.en.js?28294" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Widgets/Form/fastclick.js?10_0_200_0" type="text/javascript" charset="UTF-8"></script>
    <script src="/iKuityCRM/Widgets/Form/Form.js?10_0_200_0" type="text/javascript" charset="UTF-8"></script>

</head>
2020-04-23 10-03-19
José Rosário

Hi Justin, 

Seeing Lisbon Theme Preview, Modal is loaded after SilkUI.js 

Can you share with us more context? 

My Regards, 

José Rosário 

2019-11-12 17-31-26
Justin James
 
MVP

Jose -

The system is foolishly loading the Modal JS before the SilkUI JS, so when the Modal JS runs, the SilkUI objects do not exist in memory so nothing works right for Modal.

J.Ja

2019-11-12 17-31-26
Justin James
 
MVP

See my copied code above.

Bottom line: SilkUI is not RELIABLY loading before Modal, so there is a real problem here. I have no control over the load order, this is a bug for OutSystems to fix, or give me an immediate work around.

J.Ja

2019-11-12 17-31-26
Justin James
 
MVP

I found the problem. The Web Block within the "Message" portion of the "Modal" had included Web Patterns\Layouts\Layout_Popup (it was originally a Screen being implemented as a popup). Removing that Web Block from the Block used inside the Modal fixed it.


J.Ja

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.