Templates for Dashboard or Admin Interface?

Freddy_Blockchain · November 4, 2018, 8:11pm

I guess we all use the same things every time again, again and again like:

Login Page (user, pass, remember, multilang?)
Userdashboard with proper Header/Footer and Profile on right top, User picture, Generic Userdata like: Name, Lastname, Street, Postcode, City, etc etc., Logout button, Language Switcher and user Navigation.

I checked some of the project examples but I‘m struggling with proper layouting, Header, Footer and these positions. Is there some Dashboard sample? I mean how to really setup properly :

header.inc.php
Sections and Titles
Columns and Rows
footer.inc.php

Of course every setup is individual, but I guess there are some best practices we could follow

George · November 4, 2018, 8:36pm

Maybe our admin panels expert @brad can advise here

ben · November 5, 2018, 4:39am

Have a look at the Bootstrap 4 examples for inspiration: http://getbootstrap.com/docs/4.1/examples/

Freddy_Blockchain · November 5, 2018, 9:48am

@ben Thanks so much that looks good!

Okay Update 05.11.2018: I did some research on bens input.

** SB Admin has a: Useful Dashboard with:**
Userlogin, Search, Usernotification and Usermessages
Login: Login, Register, Forgot Password
404 Page, Blank Page

** Admin LTE has a: Complex Dashboard with:**
Userlogin, Search, Usernotification and Usermessages
Login: Login, Register, Forgot Password
404 Page, Blank Page
Widgets, Userroles, Charts, Tables, Layout Options, UI Elements and extended Documentation.

https://adminlte.io/

** Adminator has a: Medium / Complex Dashboard with:**
Userlogin, Search, Usernotification and Usermessages
Login: Login, Register, Forgot Password
404 Page, Blank Page
Widgets, Userroles, Charts, Tables, Layout Options, UI Elements and extended Documentation.

** Gentellahas Bootstrap3 a: Medium / Complex Dashboard with:**
Userlogin, Search, Usernotification and Usermessages
Login: Login, Register, Forgot Password
404 Page, Blank Page
Widgets, Userroles, Charts, Tables, Layout Options, UI Elements and extended Documentation.

Download github: https://github.com/puikinsh/gentelella
Demo: https://colorlib.com/polygon/gentelella/index.html

** Gentellahas Bootstrap3 a: Simple Dashboard with:**
Userprofile, Search, Usernotification
Widgets, Userroles, Charts, Tables, Layout Options, UI Elements and extended Documentation.

Download github: https://github.com/creativetimofficial/light-bootstrap-dashboard
Demo: http://demos.creative-tim.com/light-bootstrap-dashboard

turn3636 · November 5, 2018, 2:12pm

We have used this one with good success. It is BS4 based and has pretty much anything you need. Just use the basic HTML version.
http://demo.interface.club/limitless/demo/bs4/Template/layout_1/LTR/material/full/index.html

brad · November 5, 2018, 4:58pm

In my experience the admin templates available on the web are more work than they are worth. By the time it takes to strip everything out of them that you don’t need I could have built it from scratch. The biggest problem with Admin templates is that every admin is different and . there is no layout that can fit multiple sites.

turn3636 · November 5, 2018, 5:11pm

Yes, they absolutely can be. The ones we have used in the past have “Starter Kits” which are basically the base level templates. You can start off with just a simple blank page with a header, or add a sidebar, etc. You can just strip out all the javascript links in the header. I tried one that had so many links Dreamweaver came to a halt. I think it was about 60 or 70. That was really too much. So yes, they can be difficult but some of them can be useful, you just have to know how to strip them out. And you also have a good point, everyone will need something a little different.

brad · November 5, 2018, 5:42pm

If there was a way to have a bare bones starter admin template I’d love to see it. If it works in Wappler that is.

turn3636 · November 5, 2018, 6:01pm

We have one that we plan to do before the end of the year, so maybe we can create some type of Wappler compatible Admin Template.

brad · November 5, 2018, 6:02pm

And I would be the first to offer to test it out.

TomD · November 5, 2018, 6:21pm

I think this is a good point. For a very basic layout with a sidebar, this might be a useful start:

The same person has done something a little more elaborate, but not hugely complicated:

(though the first one may be sufficent for most purposes)

Freddy_Blockchain · November 9, 2018, 9:26pm

Hi @TomD I’ll try out that Bubbly Dashboard Template. But how did you separate or merge the existing bootstrap from bubbly with the “Bootstrap” from Wappler?

Cause when you add a new template you’ll add the Bootstrap Framwork to “App” Sidebar, so sections are recognized. So I guess you changed some path then? Just want to know in which “direction you merged”

TomD · November 10, 2018, 1:44pm

Hi @Freddy_Blockchain. When trying out examples or templates, I start by creating a new page in Wappler including Bootstrap and App Connect. I then copy/paste the template body part, excluding any javascript file references before the closing body tag. I’ll then add any required css references. I’ll include as few external files as possible, to keep things simple and exclude anything I don’t need.

I haven’t actually used templates much in Wappler. I’ve used the above approach more for trying things out and, initially, to understand better how Wappler works - eg by putting the Bootstrap examples into Wappler, and some examples from dmxzone.com. I’ll probably use the simpler template I mentioned above as a starting point for the admin section of a site.

Freddy_Blockchain · November 10, 2018, 3:12pm

Perfect you exactly understood me! Good and logic way thank you so much, will try it out

nevil · October 29, 2019, 7:59pm

Did this became a thing eventually?

turn3636 · October 29, 2019, 8:35pm

Well, yes and no. We are using MDBootstrap Pro and have really good luck with it, as it doesn’t add a lot of extra JS files. I have not been able to get some screen shots together to show how we are using it yet. Hopefully by the end of the year when things slow down. Check out the docs on MDBootstrap. It’s well documented, and as long as you don’t use the Angular or other frameworks, it pretty straight forward. A little expensive though, but better documented than some of the cheaper Admin templates out there.

CMerlin · May 23, 2021, 8:17pm

How do you upload them?