Custom ui layout implementation in mendix

0
    I have created this layout using HTML, SCSS, Bootstrap, and JavaScript. Now, I need to recreate the same layout concept in Mendix. The top bar should include a search box on the left, and notification and user profile icons on the right. When the user clicks the profile icon, a dropdown menu should appear. On the left side, clicking the menu icon should open a popup menu that contains the navigation options. how to create this
asked
2 answers
0

Hello Ajmal,

 

A good starting point is to get familiar with the different widgets, options, and styling possibilities within mendix.

 

This article gives you a brief introduction : 

https://www.mendix.com/evaluation-guide/app-lifecycle/develop/ux-multi-channel-apps/ui-design/

 

Also take a look into the learning paths :

https://academy.mendix.com/link/paths

 

And ofcourse the documentation : 

https://docs.mendix.com/howto/front-end/atlas-ui/

 

Hope this gives you a kickstart,

 

Good luck !

answered
0
  1. Select widgets that are similar to what you want to achieve. Here is a complete list: https://atlasdesignsystem.mendixcloud.com/p/dashboard
  2. Create a UI Resources Package (UIRP) in your project (there is a learning path for that - https://academy.mendix.com/link/paths/135/Implement-a-Design-System).
  3. Create a page layout in your UIRP.
  4. Add custom CSS classes to your widgets and create SCSS styles in your UIRP.
  5. Add JavaScript using this module: https://marketplace.mendix.com/link/component/56
answered