how to build admin lte top 4 right hand side boxes in aware

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
swiftinitpvtltd
Posts: 370
Joined: Sat Apr 28, 2018 3:33 am
Location: India
Contact:

how to build admin lte top 4 right hand side boxes in aware

Post by swiftinitpvtltd »

Hi,
This is our first post as we just started developing using aware IM and its cool!!
How do we use
https://adminlte.io/themes/AdminLTE/index2.html 4 boxes on top right? CPU traffic etc.
https://adminlte.io/themes/AdminLTE/index.html total orders etc.
customaware
Posts: 2391
Joined: Mon Jul 02, 2012 12:24 am
Location: Ulaanbaatar, Mongolia

Re: how to build admin lte top 4 right hand side boxes in aw

Post by customaware »

To get you started.....

In a Visual Perspective created Nested Responsive Panels for each of your boxes.

Set each to type od Static html.

From you demo.... inspect..grab this bit... (I have changed the Gear Icon to FontAwesome)

<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-gear fa-2x"></i></span>

<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">90<small>%</small></span>
</div>
<!-- /.info-box-content -->
</div>

Now create a css file called, say, style.css with the following in it.... (which I grabbed from an inspect from your sample site.

.info-box {
display: block;
min-height: 90px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 2px;
margin-bottom: 15px;
}

.info-box-icon {
border-top-left-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 2px;
display: block;
float: left;
height: 90px;
width: 90px;
text-align: center;
font-size: 45px;
line-height: 90px;
background: rgba(0,0,0,0.2);
}

.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
background-color: #00c0ef !important;
}

.info-box-content {
padding: 5px 10px;
margin-left: 90px;
}

.info-box-text {
text-transform: uppercase;
}

.info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}


In the folder C:\AwareIM\Tomcat\AwareIM\Custom\CSS create a folder EXACTLY the same name as your Business Space and put your style.css file in there.

Put under test and try out.

If you know html and css you can style this any way you want.

Additionally, If you want any data from the application to be displayed then wrap the data in << >> and so long as the instance of the BO is in context then it will show... ie... in your example
assuming you have a Value in, for example SystemSettings.MyValue or LoggedInRegularUser.MyValue...

<<SystemSettings.MyValue>> would go where your static 90 is.
Cheers,
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
Image
swiftinitpvtltd
Posts: 370
Joined: Sat Apr 28, 2018 3:33 am
Location: India
Contact:

Re: how to build admin lte top 4 right hand side boxes in aw

Post by swiftinitpvtltd »

Super!! Thank you!
swiftinitpvtltd
Posts: 370
Joined: Sat Apr 28, 2018 3:33 am
Location: India
Contact:

Re: how to build admin lte top 4 right hand side boxes in aw

Post by swiftinitpvtltd »

Everything worked perfectly fine based on the inputs! Thanks. Now I have admin lte template.
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: how to build admin lte top 4 right hand side boxes in aw

Post by Jaymer »

can u post some pics of your dashboards?
thx
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Post Reply