Bootstrap Dashboard

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Bootstrap Dashboard

Post by weblike »

Hi all,

I'm trying to build a bootstrap dashboard. I managed to integrate bootstrap in my apps.

My problem is that I'm trying to refresh tags from AwareIM with javascript, but is not working. Is this a limitation that javascripts are not running in html pages imported in Visul Perspectives??

I am using this code to refresh the html page and in standalone html page it's working (outside of AWM)

<head>

<meta http-equiv="refresh" content="5" />
<!-- This will refresh element every 5 seconds-->
<!-- START script-->
<script src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script>
function autoRefresh_div()
{
$("#result").load("<<LoggedInUsername.DashBoardOpenedOrders>>");// a function which will load data every x seconds
}

setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
</script>
<!-- STOP - Script-->
</head>

<body>

<div id="result"><<LoggedInUsername.DashBoardOpenedOrders>></div>

</body>


What I'm trying to achieve is this:
Image

Any advice will be much appreciated..
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
customaware
Posts: 2414
Joined: Mon Jul 02, 2012 12:24 am
Location: Ulaanbaatar, Mongolia

Post by customaware »

Hi George,

Sorry that I don't know the answer to your question but Dashboard looks brilliant.
Cheers,
Mark
_________________
AwareIM 6.0, 8.7, 8.8, 9.0 , MariaDB, Windows 10, Ubuntu Linux. Theme: Default, Browser: Arc
Upcloud, Obsidian....
Image
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Post by weblike »

Thx Mark :)
Yes it looks great, but not finished the work yet...It's just design for the moment....I want functionality also :)))).....
I have just adapted bootstrap templates which I have found on google. There are many examples out there...

Now I am struggling with implementing javascript/ajax in these dashboards... Outside of AwareIM my codes are working, but I think there is a limitation on rendering javascript code inside AWIM.

Also I have tried to include zopim.com in my apps, but no luck yet...
I have emailed Support for this...to clarify if this is a limitation or how it can be done...

Thanks
Nice day..
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
BenHayat
Posts: 2749
Joined: Thu Dec 23, 2010 5:48 am
Location: Fla, USA
Contact:

Post by BenHayat »

weblike wrote: I have emailed Support for this...to clarify if this is a limitation or how it can be done...

Thanks
Nice day..
Nice work George;
Once you resolve it, would you mind sharing it here if there were issue in Aware or you needed to put css or JS in certain locations ans etc.?
Thanks!
hpl123
Posts: 2609
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Autorefresh

Post by hpl123 »

Weblike,
Great job and regarding the java for tag update. This doesn´t work in Awarw IM. Support is aware of the problem and there will be an update in an upcoming maintenance update implementing autorefresh in frames and contentpanels which would then solve this limitation/problem. For more information about this discussion look here:
http://www.awareim.com/forum/viewtopic.php?t=7310
Henrik (V8 Developer Ed. - Windows)
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Post by weblike »

Hi Ben, Hi Henrik
thanks both

Ben, I will share the steps as soon I will finish...very soon...(I just want to look professional)
It's not so hard, although a little html, css, knowledge would be easier to accomplish.. 90% of work you can find on google(I will share the links)...I have choose to implement Bootstrap because looks great and you can find a lot of documentation on the web.
A great help were also the other topics on this forum about integrating bootstrap in AWIM. Rennur describes details about implementing this here http://www.awareim.com/forum/viewtopic. ... =bootstrap

Henrik,

Thank you for your reply. It's a great news that autorefresh will be available also in panels...Although what I follow is that not the entire page to be refreshed....only the elements that I want(with ajax, jquery, etc...). I am curious how it will work the autorefresh in panels. Also a more freedom in using javascripts in imported html pages..would be fantastic..but let's see first how the new feature will work...

Nice day..
Keep in touch,
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
aware_support
Posts: 7527
Joined: Sun Apr 24, 2005 12:36 am
Contact:

Post by aware_support »

If you want our help on this please purchase a support ticket. Any usage of Javascript like what you are trying to achieve here is an advanced topic and you really need to understand how Javascript/HTML works and how it fits into the Aware IM framework. There is some explanation of this in the Programmers Reference Guide for version 6.0

The only piece of advice we can give here is:

1. All references to the external javascript files have to be added to the AwareIM/Tomcat/webapps/AwareIM/startup.html file
2. If your javascript gets an id of an element and modifies it (like in your example) you need to modify the "render" part of the dialog activated by the Advanced button. This is because when initialisation script executes the DOM structure of the document is not ready yet
Aware IM Support Team
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Post by weblike »

Hi Support,

Thank you for your reply.
I will check the "Programmers Reference Guide"...If I'll not succeed, I'll open a support ticket..
thank you again

Bye.
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
Jaymer
Posts: 2475
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Post by Jaymer »

@weblike

hi
hope your progress is good.

to excite us, can you give us screenshots of how u think your app looks better using Bootstrap?
I don't know a lot, but it seems you are using this to "just make fancier looking buttons", is that correct?

I don't understand the benefits of adding this extra layer of html/css/etc.

thx
jaymer...
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Post by weblike »

Hi jaymer,

I'm working on this app and I'm changing a lot this days.
And YES, you are right I'm using bootstrap to give my apps more colorand I think more professional look. If you know bootstrap, it's very easy to work with and it looks great.
My approach on apps is to have a main dashboard on every user access level which gives a summary of main activity: Total income per month, Number of created invoices/today/this month..etc.
I have requests from my users to give such of informations and I try to make them more attractive...
For now my users are happy with this approach and I'll continue in this way.

For the moment I can't give you more screen-shots, but as soon as my app will be finished, I'll make it public.
If you need any advice on this let me know and I'll gladly help out.
Thank you
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
aware_support
Posts: 7527
Joined: Sun Apr 24, 2005 12:36 am
Contact:

Post by aware_support »

We have just helped one of our customers integrate this dashboard into his application. There are several tricky points to be aware of and one of these days we will write them up. But the end result looks good. At this stage you will probably need a support session with us to go through them.
Aware IM Support Team
hpl123
Posts: 2609
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Bootstrap Dashboard

Post by hpl123 »

Support,
I don´t know how much of the dashboard and Bootstrap design you actually integrated but one thing (most important IMO) I would like to know is how you got the auto-refresh of tags to work for the dashboard. Even better, there has also previously been a discussion regarding having a timebased autorefresh on contentpanels and frames in Aware IM and having this features would be very valuable and would solve all html panels auto refresh needs. I work more and more with external html panels that needs to be updated when there is a change in data (time based e.g. every 5 seconds is the ideal because sometimes change in data is not initiated by the logged in user). I am also working on a snippetsite with different snippets for Aware IM and having autorefresh in some form is very important for most snippets to work as they should.

REALLY hope this can be added. Thanks
Henrik (V8 Developer Ed. - Windows)
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Re: Bootstrap Dashboard

Post by weblike »

Hi Henrik,

Yes ...we have discussed this on an old post.. This is a must have feature.
What I did in the meantime was to integrate the html queries and those queries to integrate also in panels.
The queries has the autorefresh function...but here is a catch..because the "loading" message is shown and the screen flickers(don't look proffessional).

This scrren flickering is annoying and it appeared since v6. In v5.9 the autorefresh was smooth...
What I have googled seems to be a extjs problem which was present in the past too.

Again, YES, the refreshing of panels would be a very useful feature.

thank you..
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
hpl123
Posts: 2609
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Bootstrap Dashboard

Post by hpl123 »

weblike wrote:This is a must have feature.

The queries has the autorefresh function...but here is a catch..because the "loading" message is shown and the screen flickers(don't look proffessional).
Absolutely must have and hopefully the screenflicker etc. behaviour can be fixed. Another thing, ALL queries should ideally have the option to disable the "loading" message if needed.
Henrik (V8 Developer Ed. - Windows)
Gabbitas
Posts: 334
Joined: Sun Jan 03, 2010 3:36 am

Re: Bootstrap Dashboard

Post by Gabbitas »

Henrik,

I think you can disable the 'loading..' message on queries. In the configuration tool open the query, click on details, look in the 'other' separator and there is a checkbox list for various options. The last one on the list is 'Show Loading Message'

Is this what you are referring to?

Thanks
Post Reply