[Silk UI Web] Silk UI Framework

[Silk UI Web] Silk UI Framework

  
Forge Component
(47)
Published on 11 Nov (4 weeks ago) by OutSystems Labs
47 votes
Published on 11 Nov (4 weeks ago) by OutSystems Labs
Creating beautiful UI that works on all devices, mobile architectures and platforms used to be painful. OutSystems has combined all the best aspects of modern UI frameworks with rapid visual modeling to create Silk UI. This new framework plugs directly into the Platform, enabling the creation of compelling experiences with drag and drop simplicity, while also abstracting away the complexity and change of underlying technologies like Javascript, HTML5 and CSS3.

Silk UI is a fully responsive framework, with dozens of ready-to-use patterns, that can be easily dragged-and-dropped to build amazing UI, without any coding. With several developers pointing to CSS as one of the hardest “languages” to master and all the new challenges brought by the wide set of form factors across devices, pushing this complexity away was key to solving this issue.

This codeless approach has proved to boost developer productivity, foster usability through improved quality and consistency, improve look and feel out-of-the-box, and reduce the skillset required for developers to build good UX.

Learn all about this new framework on the Silk UI Website

SilkUIFramework consumes 21.254 software units.
If I add one of the new themes like the Dublin Theme then I consume more 3.608 software units.
I'm consuming about 25.000 software units just to use a new theme and widgets. 

On an environment with 150.000 software units this represents 16.5% of the software units consumed
On an environment with 300.000 software units this represents 8.3% of software units consumed.

For now I won't even install the Silk UI Sample Pages and Tokyo Template because they will increase this value for more than 30.000 for sure.

This is too much for many environments, and it's a step backwards from RichWidgets and London.

Silk UI framework should be like RichWidgets, only maintained by OutSystems (system eSpace), and with that not consuming any software unit.




Interesting question from Carlos H. Could anyone please let the community know how many Application Objects are consumed by SilkUI and by 1 template ?

Many thanks,
Wim
Hi @Carlos,

As you mention, OutSystems Platform already allows you to build and maintain a great UI, via the built-in London theme, RichWidgets, and by allowing you to package your own UI components (javascript, HTML5, CSS) in easy to reuse, change safe, widgets and blocks.

Silk UI boosts this productivity even further by accelerating and standardizing the way multi-form factor user interfaces are built.
We've decided that for Silk UI, as with any other Forge component (e.g. connectors and sample apps), the number of AOs/SUs reflects the aid the platform is providing you in supporting the lifecycle and easy change of these components.

The benefit of the Silk UI framework being open-source is that you can extend, change it and make it your own. The platform helps you manage its lifecycle.


@Wim de Maeyer, the core Silk UI framework consumes 13 AOs. The cost per template may vary... but the first four templates we've released (Dublin, Liverpool, Tokyo, Vanilla) consume 8 AOs each.
Arlindo Lima wrote:
The benefit of the Silk UI framework being open-source is that you can extend, change it and make it your own. The platform helps you manage its lifecycle.
 Hi Arlindo,

You say that SilkUI is open source so I can change it, but then on SilkUI FAQ you have:
Should I change the Silk UI components?
Try to avoid it. It will make the upgrade to future improved releases a lot harder. Prefer to create your own patterns on the side.

SilkUI is open source so I can change it. But then you don't recommend I change it. So, should it be open source in the first place? This looks like inception :P

I'm just saying that this way it will be hard to convince customers with small factories to spend about 25.000 software units to have better looking apps. Like I said, a costumer with 150.000 software units would need to sacrifice 17% of it's environment just for widgets and themes.

I know that I can continue to use London and RichWidgets, but has I said this is a step backwards.
I've been waiting for something like SilkUI for a long time, because bootstrap is around for ages, and everyone was using it and Outsystems only gave us some few and limited widgets with RichWidgets.
And now that you finally did it I'm just disappointed because instead of being part of the Platform itself like RichWidgets, your are delivering it outside the platform and forcing us to spend a great amount of software units or application objects.
Carlos Henriques wrote
SilkUI is open source so I can change it. But then you don't recommend I change it. So, should it be open source in the first place? This looks like inception :P
Well spotted, Carlos. :)
Silk UI is open source, so if you need to modify/ enhance/ remove parts of the Silk UI framework, you can.
However, if you customize the core framework, whenever we release a new version (either bug fixing or enhancements), you will have to check what change and apply the changes to your "customized version" (using Service Studio's visual merge for instance).

This is why we don’t recommend changing the framework directly but, instead, extend it by creating your own templates… However, should you really need to customize the framework, you can. (E.g. you found an issue that will only be corrected in the next release or you want to trim down SUs.)
Is there a something cheat-sheet for Silk UI?  The reason I am asking is, I would like to customize the style to meet my company's guidelines, and would like to change a color/font  globally and see the impact it has on various controls. 
Hi Ganesh,

There's a customize option for each template you use. This allows you to easily do what you want I think.
Thank you. Looks pretty nice. It requires a login and somehow the Outsystems portal login doesn't seem to work. There is no way to reset the password on that page either

http://labs.outsystems.net/themecustomizer/Login.aspx


Hmm, not sure how you ended up on that page. In fact that app does not require a login if you remove the Login.aspx from your URL you get right in...
Hello Ganesh,

Thank you for all your feedback.
We have just uploaded a new and improved version of the customizer, with some fixes and improvements.

Please let us know if you need any more help.

Regards,
Samuel Jesus
Thank you. The new tool looks great and does not have the login issue.

The challenge i have is, the CSS generated based on the logo is not good-enough. The buttons and other controls are not influenced by the color choices made earlier. There is no way for me to put in modified CSS to understand how buttons and other controls look. I would like look at all controls in a single page and see how changing the style impacts the controls.

If the source can be put on Forge, it would of great help.
Hello Ganesh,

If you already uploaded your logo and have a set of colors selected, you can check the look and feel of the patterns, by clicking the Check It option, on the menu.



If you want to do more customizations other than the ones available on the customizer, the only option available is to create a page with the Silk UI patterns you want to change, and change the CSS directly on Development Environment.

Please let us know if you need any more help.

Regards,
Samuel Jesus

Fistly I'll point out I am a huge fan of Outsystems.... BUT I agree with Carlos - for me the license cost of Silk is too high. Whilst I agree Silk increases productivity I object to being charged SU's for unused features. We should only pay for what we use. I don't like the idea of downloading SilkUI and having to modify to strip out unused parts to reduce SU usage - as this will be an overhead from that point on with every release. I emplore you to re-think this pricing structure.!
Gary, I'm sympathetic with your point of view. However, in the Platform there is no mechanism to only count used elements...

I understand that for customers in the lower SUs bands, the license consumption of Silk UI will not please everybody. I also agree with Carlos that, at this point, getting back to just London and RichWidgets is a step backwards… Still, for now, your best options are: 1) increasing the number of licensed SUs or 2) modifying Silk UI.
@Arlindo

You are missing a 3rd option for most customers in this situation:

3) Just ignore SilkUI and keep using the old themes and the old widgets.

In my opinion:
- Option 1 is just wrong. It looks like Outsystems is not adding any more value to the platform for free and SilkUI is just a bait to increase sales.
It's like saying to a customer:
"- Hey, Outsystems now have some cool themes and widgets and your apps will look great, but since you don't have enough software units, you need to double them and pay even more just for that." -> They will choose my option 3 for sure.
And how do we explain this to potential customers? It's already hard enough all the software units thing, and now after doing a DEMO of 9.0.1 using one of the new themes and SilkUI I need to explain they will buy 150.000 but Outsystems already "steels" them 25.000 for widgets :/
I could say them:
- "With 150.000 software units you can have 3 fancy apps with SilkUI or maybe 4 without it" :P

Like Gary I'm a huge fan of OutSystems, but for the first time I'm disappointed. After waiting for so much time for a proper bootstrap integration and finding out that it's a Forge component consuming a considerable amount of software units is disappointing.
Even Microsoft fully integrates bootstrap with ASP.NET MVC without asking anything for it, and it is open source, I can change it and I can keep it up to date.

- Option 2: it's not an option at all.

Carlos, Silk UI isn’t just Bootstrap. We went beyond it and made it simpler than Bootstrap, as we wanted to make sure it was easy to work with.

Some examples:
  • Silk UI makes left and top margins more explicit, and uses the editor to figure out when to put an automatic left margin. This makes the mental model a bit clearer, the generated CSS is simpler to understand and the layout easier to modify.
  • Bootstrap uses very ugly hacks, either negative margins or floats with clearfixes. Even people with fair understanding of CSS lose time wrapping their head about the underlying concepts.
  • Silk UI has built-in server-side responsive rendering - which makes it more performant and a lot easier to handle for common scenarios...
But, what I like most about Silk UI is how it incorporates field-tested and best-of-breed patterns (such as automatically recommending spacing between elements, controls, etc.). These patterns and elements have been evolving (and will continue to evolve) with the feedback from several UX Designers and dozens of projects.

We have some of our Beta customers that used Silk UI saying that they’re being able to have developers, new to the Platform, building applications that have a gorgeous look & feel out of the box AND that adhere to the corporate style guide they’ve implemented on top of Silk UI... and all of this faster than ever, and with less iterations, as both UX experts/ designers and the stakeholders get happy with the results early.
We at OutSystems are also seeing this happen with the projects we’ve been delivering.

Happier application users, that’s what Silk UI is to us. In our opinion, 25k SUs are worth it.


This doesn’t mean I don’t understand your point of view, Carlos. I do. Thanks for the feedback.
Joining this discussion, that I've been following, one strong argument in favor of Silk UI is that 3rd point Arlindo mentioned: RESS (Responsive through Server Side components) and basically overall platform fit.

It does take many SUs but we have the choice of not using it.
Well it's a sad day for me... I've just deleted SilkUI. Spending more money on a license is out of the question for me and with SilkUI installed I was nearing my license limit and therefore will stop me completing my app.
Option 2 is backwards and I'm not prepared to have this messy situation... Option 3 it is for me - I can't tell you how disappointed I am..!
Tiago Neves wrote:
Joining this discussion, that I've been following, one strong argument in favor of Silk UI is that 3rd point Arlindo mentioned: RESS (Responsive through Server Side components) and basically overall platform fit.

It does take many SUs but we have the choice of not using it.
 @Tiago

SilkUI value is not being questioned. I've already used it and it's awesome.
And I know that I have a choice to not use it at all, but that's not what I was expecting from OutSystems.

I'm always expecting new features in each new version of the platform. Features that I can add to my project and increase its value, and not something that I'm forced to skip because of some details.

Using London and RichWidgets knowing that I could been using Dublin\Liverpool with SilkUI it's just weird.
It's like having a Porsche in the garage and keep driving a Fiat.


@Carlos

I think you are correct. SUs should only be consumed by applications we build on top of the platform.
Maybe Silk UI or number of users or SEO urls (just an example) or other features might be priced separately as complements to the license package but SUs are supposed to be only consumed by what we build or take from the Forge (non-OutSystems components).

Just a thought...
Carlos Henriques wrote:
Tiago Neves wrote:
It's like having a Porsche in the garage and keep driving a Fiat.

 
I parked a sports car in my garaage for 10+ years and didn't drive it, but I always remembered to pay for rego every year! :)

True story!

WHY didnt I drive the sports car?... because it was always parked in the garage, and it required too much effort to drive it out, instead I drove my toyota, it is always parked outside! ..... convenience! :) 

Argh,

Framework refuses to install.. getting an error. :(
Is there a work-around for an eap, since I am not getting any feedback what it's actually doing.

Hello Statler, 

I´m sorry to learn that you're experiencing problems with the installation.
One possible workaround is to download the Application file directly from Forge (outside the Development Environment), and try to install it on ServiceCenter.

Also, can you give us a bit more detail on the error you're getting ? 

Best regards,
Samuel Jesus
Hmm,

when using the servicecenter it immediatly pops up with the question in which catalogue the espaces needs to be installed. And it goes smoothly afterwards
Guess the "forge" way fails when having multiple catalogues!

Hello Statler,

I´m glad the workaround worked for you. and thank you for the feedback. We will take a closer look into it.

Best regards,
Samuel Jesus
Gonçalo Borrêga - will be speaking.. cool! :)
I know all Gonçalos look alike, but the "RAD Remakes Modern UI Frameworks: Silk UI is Born" presenter is actually Gonçalo Veiga. ;)
Is the "preview" or checkit page also available in the silkUI so we can check how our customizations look like?

and in one single page.. could be very helpful for developers/designers to check their changes etc.

I agree with Mr Statler: it would be very handy to have the theme preview page(s) with all the patterns as an espace. That way we can see and check the changes (delivered by designer) and use it as a styleguide for the developers. Now, the only way, seems to do it ourselves: put all the components on a screen to see the impact of the design changes.
Hello Statler and Hans,

Thank you for the feedback. That's actually a recurrent feedback and we are working on it. We will let you know as soon as we get that eSpace ready.

Best regards,
Samuel Jesus
Hi guys I'm with a strange problem, I change my application to work with Dublin Template and in my develop server everything work's fine, but when I publish the system to my production enviroment the icons of menu don't appear and another problem is the icon search of input appear above text inside input in both enviroment. Anyone have any idea? Please take a look in picture.

Develop enviroment - Ok


Production enviroment



And problem with input search:








Hello Alexandre,

I’m sorry to learn that you’re experiencing problems. Can you tell us the Silk version and the browser you are currently using? Also, can you please share with us an eSpace with the issue.

Looking at your screenshots, I´m noticing that the Menu on your production environment appears to be rendered as a Tablet. Can you please try to clear your cache and cookies and try again? 

Best regards,
Samuel Jesus
Hello Samuel thanks for answer. The version is 1.0.1 ( I think this is last version). The browser is anyone, you can try using Chrome or Internet Explorer. To see problem you can access

Production enviroment (with problem)
Host: geniuserp.cloudapp.net 
User: ****
Password: ***

Develop enviroment
Host: dev1.zeusweb.com.br/genius
User: ******
Pass: ***

I use ISVPortal and I don't have Liftime, so is possible that some espace or extersion are missig?

Hello Alexandre,

First of all, for security reasons, I edited your post to hide the username and password (This are public forums).

Regarding your issue, after checking your environments, you are still using Silk UI Framework version 0.9.0, which was a beta version and had some issues. One of the issues was exacly the device detection on production environments. 

Can you please upgrade to the latest version (1.0.1) and check if that solve your issue? 

Best regards,
Samuel Jesus
Hello Samuel I update Framework, but I'm still have problem with left menus. The information of access are sill valid, can you help me? What can be?

I think that problem of device detectation persist.

Thanks again.

Alexandre Costa
Hello Alexandre,

I've tested it and it is fine. The reason why you still can't see the issue solved is because of the cookie.
Silk UI Framework uses a Server Side Responsive aproach, which uses a cookie to store the device type to increase performance. You have updated to the new version, but your cookie already is setted as a tablet. 

To solve the issue, you just need to clear your cookies, and everything should be ok.

Please let us know if that solved the issue or if you need further help.

Best regards,
Samuel Jesus


Hi Samuel thanks for your support this issue are solved, was cookie :-) thanks, but I have another issue, you can simulate this easily, if you set your resolution to 1024x768 you will see the left menu is to big to appear in screen but no scroll bar appears to scroll through the screen making access to lower menus impossible. This is my mistake or framework?

Thanks again.
Hello Alexandre,

After inspecting your code, we realized that you are using a custom menu, and that's what is causing the issue.
In order to correctly calculate the menu size, you need to have the class Application_Menu.
Bellow, you can see a screenshot of your code, and a screenshot of an example with the menu scrolling.

Your code:


Menu with scrolling:



Hope this solution works for you, and please let us know if you need any more help.

Best regards,
Samuel Jesus
Hello Samuel I update code to use class as you tell me and now the scroll bar appear in desktop, but I there's a issue yet. When you resize to tablet layou the scroll bar don't appear. The scroll bar now appear only in desktop layout. When in tablet I can't see my lower menus. Can you help me with this?

Thanks again.
Hi guys, first of all congratulations for good job with Silk UI. I change my app to work with Silk UI but I'm having problems with object Accordion. Ever I have object inside it, a button for example that execute somethings and after this update my screen using Ajax Refresh all my open accordions are closed. How to execute an Action using Ajax Refresh and keep my Accordion open?
Hi Alexandre, the problem with the input search, simply set the type property to "Text".
 
Hello Samuel I update code to use class as you tell me and now the scroll bar appear in desktop, but I there's a issue yet. When you resize to tablet layou the scroll bar don't appear. The scroll bar now appear only in desktop layout. When in tablet I can't see my lower menus. Can you help me with this?

Thanks again.
Getting back to the 25k SU's for this framework.

Arlindo's point (The benefit of the Silk UI framework being open-source is that you can extend, change it and make it your own.) it's not really a point

Well at least it's not a point used by OS before, because we can do the same with RichWidgets, you can just clone it and make it our own, and RichWidgets doesn't cost any SU's / AO's but the clone of RichWidgets does cost you.

So why not take the same approach? 17% of a subscription is really alot...

Basically OS wants the customers to pay (as in get extra SU's) for the time and money OS put into developing this framework, unlike what they did before in similar upgrades

Not the best of moves to be honest

Best regards,
PC
Alexandre Costa wrote:
Hello Samuel I update code to use class as you tell me and now the scroll bar appear in desktop, but I there's a issue yet. When you resize to tablet layou the scroll bar don't appear. The scroll bar now appear only in desktop layout. When in tablet I can't see my lower menus. Can you help me with this?

Thanks again.
 
 Hello Alexandre,

Thank you for the feedback and sorry for the late reply.
We have detected an issue with the scroll inside the tablet menu, and we added that fix to the new version released on Friday (Silk UI Framework v.1.0.3), so if you update to this version your problem will be fixed.

Hope this solution works for you, and please let us know if you need any more help.

Best regards,
Samuel Jesus
Hi Samuel thanks for help, this solution solve my problem. For now I don't have any other issue. Thanks. 

Best regards.
Hello Ari and Huarlem,

Thank you for your feedback 
We have been investigating the issue and a fix will be available on the next SIlk UI release, which will be a minor version released during next week.

Best regards,
Samuel Jesus

The usage of the software units by Silk UI being counted towards the license limit is being addressed internally by OutSystems.
So... possible good news coming...
Why is Patterns_Liverpool inside the SilkUI-framework?

I want to clone Liverpool to prevent too many @imports and redundant css (just the colors and some extra stuff)
And possible reduction of stuff we don't ever use at all.

Hi guys, I need to increase the amount of Menu Link for the widget IconDropdown, which has only six links. Does anyone know how to do?
Hello Huarlem, 

If you want to increase the amount to Menu Links, my suggestion is to copy the IconDropdown pattern to your application and add the necessary Menu Links.

Best regards,
Samuel Jesus
Hello Statler,

Sorry for the really late reply.
By leaving the Pattern_Liverpool inside SilkUI, you are able to build custom Themes based on Liverpool Patterns without having to replicate the patterns stylesheet for each custom Theme.

Best Regards,
Samuel Jesus
Hi,

First of all:
I am missing the description of responviveBehaviour records.
what does them do exactly?


Furthermore, I want to hide the left-column of the widget (SmallLeftColumn) completely
For the moment I cannot do this. I end up with a big white space (because I can only hide an inner-container)

Thanks in advance
Hello Statler,

Are you talking about the ResponsiveBehaviour Entity? If that's the case, that entity is used to define the behaviour for the structure elements.

Regarding the SmallLeftColumn, can you provide a bit more context of what you need ? Can you send us a screenshot or an eSpace?

Best Regards,
Samuel Jesus
1. yes i;m talking about those, but descriptions are lacking.

2. check out https://joostlandgraf.outsystemscloud.com/Wiki/Homepage.aspx, when I make the screen smaller, it hides the inner container, but i'm stuck with a white space.

Hello Joost,

In order to do what you are trying to do, you need to set the tablet behaviour of your SmallLeftColumn to BreakAll, and in order to reduce the margin to the top of the screen, you could set the MarginBottom to false.

Please let us know if you need any more help.

Cheers,
Samuel Jesus
cheers!

Tiago Neves wrote:
The usage of the software units by Silk UI being counted towards the license limit is being addressed internally by OutSystems.
So... possible good news coming...
 Is there any news about this?

Almost 2 months since the NextStep and I still haven't heard anything about the SU usage of this component...
 
I think SilkUI is a great framework, can't wait for it to mature and grow in features.

One issue i have however is when a user drags their webbrowser window to the left or right border of the screen, default windows behaviour is to snap the webbrowser to 50% of the screen, i decided to use IsDesktop() to detect this screen size (which whould compare to tablet-mode at 50% of 1920x1200) to cut off text columns and hide text labels on buttons inside the TableRecords columns.
Surprisingly the TableRecords suddenly displays as if it has Phone layout (only shows 1 column which is expandable by clicking)
Is there a workaround for this behaviour? I want to be able to control which columns I show at each windowsize.
Or is this an early bug because the framework has not matured yet?

Hello Daniel,
Welcome to the Silk UI discussion!

The framework matches your current window size with a Tablet on Portrait mode, which is the "break point" where tables change to responsive (not only in Phone).

You can disable this by adding the class .NoResponsive to the table. You'll probably want to add a condition to add the class only for tablets since this class disables the responive mode for all devices and you may want to keep it for Phones. I hope this helps you!

My regards,
Dinis Carvalho

Pedro Coelho wrote:
Tiago Neves wrote:
The usage of the software units by Silk UI being counted towards the license limit is being addressed internally by OutSystems.
So... possible good news coming...
 Is there any news about this?

Almost 2 months since the NextStep and I still haven't heard anything about the SU usage of this component...
 
 So, 5 months after NextStep (to the day) and still no news about making SilkUI a part of the platform as the RichWidgets and LondonTheme, etc.

Any news on this or was it just BS to keep the unhappy ppl silent for a while?

Best regards,
PC
 
Dinis Carvalho wrote:
Hello Daniel,
Welcome to the Silk UI discussion!

The framework matches your current window size with a Tablet on Portrait mode, which is the "break point" where tables change to responsive (not only in Phone).

You can disable this by adding the class .NoResponsive to the table. You'll probably want to add a condition to add the class only for tablets since this class disables the responive mode for all devices and you may want to keep it for Phones. I hope this helps you!

My regards,
Dinis Carvalho
 
Thanks!
The .NoResponsive does help to control the way the page looks (even though it's all on a computer monitor and no tablets are involved)
 
Tiago Neves wrote:
The usage of the software units by Silk UI being counted towards the license limit is being addressed internally by OutSystems.
So... possible good news coming...
There are good news. Now, users can download and experiment components from the Forge at will, and have anyone in their company test drive and build new apps.
Why? The current OutSystems Platform pricing model gives users unlimited development capacity to their Development environment, just as you have in the personal environments.

This means everyone can now experiment Silk UI themes and sample apps freely. The next step will be to decide which theme(s) and Forge components will be used in the apps to be promoted to the Test, Acceptance, Production, ... environments. Only in these environments the applications and components count towards the subscribed development capacity limit.

However, this requires an update to your OutSystems license. If you're a customer or a partner, please talk with your Account Manager or Partner Manager for more details or questions.


With this improvement we are giving users the power to experiment and put new apps in the hands of users without compromise, until an application has proven its value to grow into Production... The feedback we've received so far has been great.
I just can't understand why Outsystems is charging the AOs/SUs on "featured" components.

In my opinion, we pay Outsystems to have the advantages of Outsystems platform and, one of them, is to download from forge components and connectors to help us to quickly enhance our overall quality. But when I do that, I spend AOs that should be meant only for our platform development.

For example, if I need to use Silk or Google Drive connector, 10% of my AOs quota is gone. It's like being charged twice.

I really think that Outsystems should review the way it sells its product because for small companies that make a huge effort to have Outsystems, it encourages to not follow the best practices to avoid AOs consumption. Shall I have 10 database tables and have a great model or reduce to two and save 20k€? Easy, right?
For huge companies, this problem doesn't apply but those are the ones that it's easier to pay that kind of money...