download the dashboard demo<\/a> and run it on your device. You may notice that DHTMLX widgets that build up the UI dashboard are divided into Views. You can initialize or configure each widget separately as well as remove it.<\/p>\n![\"ui-dashboard-views\"](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/ui-dashboard-views.png\")
<\/p>\n
Let’s make an overview of the UI dashboard demo based on Optimus Framework.<\/p>\n
We are to start with the index.html<\/strong> file. In the head part of the file, you can find suite.js and suite.css. We include DHTMLX Suite with all its components. Also, you can see app.js and app.css to configure webpack:<\/p>\n <\/p>\n
...
\n
DHTMLX<\/span> -<\/span> UI Dashboard
\n...
\n
\n<!--<\/span> Suite --><\/span>
\n<<\/span>script src=<\/span>".\/lib\/suite\/suite.js"<\/span> type=<\/span>"text\/javascript"<\/span>><\/<\/span>script><\/span>
\n
\n<!--<\/span> App --><\/span>
\n<<\/span>script src=<\/span>".\/app.js"<\/span> type=<\/span>"text\/javascript"<\/span>><\/<\/span>script><\/span><\/div><\/div>\nAll these files are included in the demo pack. In the body part, we can see a container to render our demo:<\/p>\n
<<\/span>section id=<\/span>"top_layout"<\/span> class<\/span>=<\/span>"demo--container"<\/span>><\/<\/span>section><\/span><\/div><\/div>\nThe initialization of the app is made via the render()<\/strong> method:<\/p>\n<<\/span>script><\/span>\/\/ <![CDATA[<\/span>
\nconst<\/span> app =<\/span> new<\/span> uidashboard.UIDashboardApp<\/span>(<\/span>)<\/span>;<\/span> app.render<\/span>(<\/span>"#top_layout"<\/span>)<\/span>;<\/span>
\n\/\/ ]]><\/script><\/span><\/div><\/div>\nThe next main file of the demo is index.js<\/strong>. It includes the UIDashboardApp<\/strong> class that renders our application. It is used in index.html to initialize the demo as we’ve described above:<\/p>\nexport<\/span> class<\/span> UIDashboardApp extends<\/span> App {<\/span>
\n init(<\/span>)<\/span> {<\/span>
\n this<\/span>.tickets<\/span> =<\/span> getTickets(<\/span>)<\/span>;<\/span>
\n this<\/span>.store<\/span> =<\/span> new<\/span> Store(<\/span>initialState)<\/span>;<\/span>
\n this<\/span>.params<\/span>.store<\/span> =<\/span> this<\/span>.store<\/span>;<\/span>
\n this<\/span>.state<\/span> =<\/span> this<\/span>.store<\/span>.getState<\/span>(<\/span>)<\/span>;<\/span>
\n this<\/span>.subscribe<\/span>(<\/span>)<\/span>;<\/span>
\n dhx.scrollViewConfig<\/span>.enable<\/span> =<\/span> true<\/span>;<\/span>
\n
\n this<\/span>.show<\/span>(<\/span>""<\/span>,<\/span> TopLayout,<\/span> {<\/span>
\n tickets:<\/span> this<\/span>.tickets<\/span>,<\/span>
\n schedulerData,<\/span>
\n ganttData
\n }<\/span>)<\/span>;<\/span> \/\/ TopLayout view<\/span>
\n this<\/span>.use<\/span>(<\/span>HistoryManager)<\/span>;<\/span>
\n }<\/span>
\n
\n subscribe(<\/span>)<\/span> {<\/span>
\n this<\/span>.on<\/span>(<\/span>"modeChanged"<\/span>,<\/span> (<\/span>id)<\/span> =><\/span> {<\/span>
\n this<\/span>.state<\/span>.mode<\/span> =<\/span> id ||<\/span> "dashboard"<\/span>;<\/span>
\n }<\/span>)<\/span>;<\/span>
\n
\n this<\/span>.on<\/span>(<\/span>"addTicketClicked"<\/span>,<\/span> (<\/span>obj)<\/span> =><\/span> {<\/span>
\n this<\/span>.tickets<\/span>.add<\/span>(<\/span>
\n {<\/span>
\n title:<\/span> obj.title<\/span>,<\/span>
\n text:<\/span> obj.comment<\/span>,<\/span>
\n type:<\/span> obj.type<\/span>,<\/span>
\n icon:<\/span> "Avatar_01"<\/span>,<\/span>
\n name:<\/span> `${<\/span>obj.name<\/span>}<\/span> ${<\/span>obj.lastName<\/span>}<\/span>`,<\/span>
\n comments:<\/span> "0"<\/span>,<\/span>
\n time:<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>.getTime<\/span>(<\/span>)<\/span>,<\/span>
\n }<\/span>,<\/span>
\n 0<\/span>
\n )<\/span>;<\/span>
\n }<\/span>)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/div><\/div>\nThe UIDashboardApp class is inherited from all the classes included in the index.js file. The TopLayout<\/strong> class is the next important part of the UI dashboard demo:<\/p>\nimport<\/span> ".\/assets\/styles\/main.scss"<\/span>;<\/span>
\n
\nimport<\/span> {<\/span> App }<\/span> from "dhx-optimus"<\/span>;<\/span>
\nimport<\/span> Store from "dhx-optimus-store"<\/span>;<\/span>
\n
\nimport<\/span> {<\/span> getLocationParams }<\/span> from ".\/helpers\/url"<\/span>;<\/span>
\n
\nimport<\/span> TopLayout from ".\/views\/TopLayout"<\/span>;<\/span> \/\/ TopLayout view<\/span>
\nimport<\/span> HistoryManager from
![\"How](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/how-to-build-ui-dashboard-with-dhtmlx.png\")
<\/p>\n