I'm new to outsystems and im much more focused on the front end. but for now im only exercising using css and to have more complex design and specific results i want to use js but i dont know the process of connecting js and css, is there a way i can design my screen's object like buttons or input fields using css and js? thank you!
Hi budang haba,
Welcome to OutSystems! In OutSystems, use inline styling or CSS classes for styling with CSS. Employ JavaScript events like OnClick to trigger actions or embed code in expressions or ' JavaScript' widgets for dynamic behavior. For instance, toggle a CSS class to change a button's style on click, combining CSS for styling and JavaScript for interactivity in a concise manner.
I recommend checking out the official OutSystems Guide on this topic: Extending the UI with JavaScript, and CSS. https://www.outsystems.com/evaluation-guide/extending-the-ui-with-html-javascript-and-css/
Regards
Reemali.
thank you for your reply! im really not that familiar to javascript so i really dont know what to code, i know how to do the on click trigger but for putting variables to js to css i really dont know. do you havev any example that i can look up to? thanks
To be honest, I have no clue what you try to achieve, maybe you should share more details.
Why you need to connect Javascript with CSS?
to achieve more great front end designs just like html, css and js
Hi Budang,
Welcome to the OutSystems community!
Getting started with OutSystems can be a smooth journey if you take the right approach. While it may seem tempting to dive straight into coding, following a guided path significantly enhances your learning experience.
I recommend exploring at least one of the following guided paths, which are not only free and available online, but also allow you to learn at your own pace. Completing these paths will equip you with the essential skills for building basic applications:
https://learn.outsystems.com/training/journeys/front-end-developer-650/widgets-and-patterns-exercise/o11/1511
or
https://learn.outsystems.com/training/journeys/web-developer-662
Taking one of these paths will provide you with a solid foundation, reducing the chances of encountering issues and frustrations along the way. Enjoy your learning experience!
Kind regards,
Daniel
ive watched it all but in the CSS training there's no topic about putting js into css.
Maybe because you should not put JavaScript in CSS.
The training will explain you perfectly how to add custom Javascript to an application or a block, screen or action. It also explains how to use custom CSS.
For reference example, You can take hint from below discussion.
https://www.outsystems.com/forums/discussion/51347/how-to-add-a-css-class-to-a-container-using-javascript-in-mobile/
Thanks,
i know that i have to put the client action so i can use js. my problem is that i cant connect the js and css like giving tags and name so i can create a designs
thanks sir! will look into it
In addition to above answers you can go through below learning path, where you can find front end related topics.
https://learn.outsystems.com/training/journeys/outsystems-for-front-end-developers-455
Ajit Kurane.
will look into it thank you!
Hi @budang haba
Please go through the below link. This will help you out for JS and CSS
Extending UI with HTML, Javascript and CSS | OutSystems
Button - OutSystems 11 Documentation
Thanks, and Regards
Prince Kumar
Hi @budang haba ,
I am not much sure but I think we can't put js inside css but yes you can use css inside javascript code so I would suggest you to use your css code inside javascript.
Best
Arun
can you give me some sample for that? and how can i implement it ?
Multiple replies already shared the right documentation or references to training.
If you cannot comprehend the documentation or training material by yourself, like most people, I would suggest to pay for a training bootcamp.
The documentation and training material defines everything you need to know. You can also search on youtube, there is plenty of informative videos.