[Silk UI Web] Modal + Lisbon Theme is Broken

[Silk UI Web] Modal + Lisbon Theme is Broken

  
Forge Component
(50)
Published on 22 Aug (19 hours ago) by OutSystems R&D
50 votes
Published on 22 Aug (19 hours ago) by OutSystems R&D

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

This is also happening in Chrome.

J.Ja

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

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

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

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

Did it solve your problem? :)

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>

Hi Justin, 

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

Can you share with us more context? 

My Regards, 

José Rosário 

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

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

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