This is my Startup.html file. Download Bootstrap, FontAwesome & jQuery separately. AwareIM ver5.8 My changes are in blue, originals are in orange. * Always backup original files beforehand. * Please note: ver 5.9 will have an addition, link to gantt chart .css. * Do not completely replace v5.9 startup.html with your amended version until you add any extras from it. Any recommendations or comments are welcome. [list][b][color=blue][/color][/b] [b][color=blue][/color][/b] [b][color=blue][/color][/b] [b][color=blue] [/color][/b] [b][color=blue][/color][/b] [b][color=blue] [/color][/b] img { behavior: url(aware_ext/resources/css/iepngfix.htc)} [b][color=blue][/color][/b] Loading page. Please wait... Ext.onReady(function(){ // find the DIV with XML node var div = Ext.get ('main_screen'); if (div == null) return; var xmlText = ""; for (var i = 0; i < div.dom.childNodes.length; ++ i) { xmlText += div.dom.childNodes [i].nodeValue; } var xmlDoc = parseXMLDocument (Ext.String.trim (xmlText)); if (xmlDoc == null) { alert ('Unable to parse XML'); return; } if (xmlDoc.parseError && xmlDoc.parseError.reason && xmlDoc.parseError.reason != '') { alert ('XML parsing error ' + xmlDoc.parseError.reason + ' on line ' + xmlDoc.parseError.line + ' ' + xmlDoc.parseError.srcText); return; } var startupMsg = Ext.get ('bas_startup_msg'); if (startupMsg) startupMsg.remove (); AwareApp.start (xmlDoc); }); [b][color=blue] [/color][/b] [/list] Cheers

Hi Rennur, I would like to integrate bootstrap into my app and in particular I want to create drop down operation menus inside a grid as per your post https://www.awareim.com/forum/d/7189> Could you, or anyone else, provide some detailed steps on how to integrate bootstrap (baby steps!) please? Thanks

REF: My Startup.html for Bootstrap & FontAwesome

Rennur

This is my Startup.html file.
Download Bootstrap, FontAwesome & jQuery separately.

AwareIM ver5.8

My changes are in blue, originals are in orange.

Always backup original files beforehand.
Please note: ver 5.9 will have an addition, link to gantt chart .css.
Do not completely replace v5.9 startup.html with your amended version until you add any extras from it.

Any recommendations or comments are welcome.

<!DOCTYPE html> 
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="ext-4.1.0/resources/EdgeUXBlueBay/resources/css/bluebay.css" id="bas_cur_theme">


<link rel="stylesheet" type="text/css" href="aware_ext/resources/css/bluebay-all.css">


<link rel="stylesheet" type="text/css" href="fw/def2/style/default.css">

<meta charset="utf-8"> 
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="assets/css/myBluebayReplacements.css">
<link rel="stylesheet" type="text/css" href="assets/css/AnyCustomCSS.css">


<style type="text/css">
img { behavior: url(aware_ext/resources/css/iepngfix.htc)}
</style>

<! Some other stuff I use (not sure if it would be relevant -->
<script src="assets/js/modernizr-latest.js"></script>





</head>

<body><div id="bas_startup_msg" style="text-align: center; padding-top: 200px; ">Loading page. Please wait...</div>
<div style="visibility:hidden;" id="main_screen" >

</div>

<script type="text/javascript" src="ext-4.1.0/ext-all.js"></script>
<script type="text/javascript" src="aware_ext/aware_full.js?V1814"></script>


<script type="text/javascript">
Ext.onReady(function(){
```
	// find the DIV with XML node
	var div = Ext.get ('main_screen');
	if (div == null) 
		return; 
	
	var xmlText = "";
	for (var i = 0; i < div.dom.childNodes.length; ++ i)
	{
		xmlText += div.dom.childNodes [i].nodeValue;
	}
	var xmlDoc = parseXMLDocument (Ext.String.trim (xmlText));
	if (xmlDoc == null)
	{
		alert ('Unable to parse XML');
		return;
	}
	if (xmlDoc.parseError && xmlDoc.parseError.reason && xmlDoc.parseError.reason != '')
	{
		alert ('XML parsing error ' + xmlDoc.parseError.reason + ' on line ' + xmlDoc.parseError.line + ' ' + xmlDoc.parseError.srcText);
		return;
	}
	
	   
	var startupMsg = Ext.get ('bas_startup_msg');
	if (startupMsg)
		startupMsg.remove ();
		
	AwareApp.start (xmlDoc);
}); 
```
</script>

<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/js/jquery-ui-1.10.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/holder.js"></script>

</body>
</html>

Cheers

Gabbitas

Hi Rennur,

I would like to integrate bootstrap into my app and in particular I want to create drop down operation menus inside a grid as per your post Ref attribute dropdown - fetch records>

Could you, or anyone else, provide some detailed steps on how to integrate bootstrap (baby steps!) please?

Thanks

weblike

Hi Mark,

I will describe how I use bootstrap:

Download bootstrap from official site or from link bellow:
https://www.dropbox.com/s/sa7xhcpfrvncfh9/bootstrap.zip?dl=0
Unzip bootstrap folder to:

c:\AwareIM\Tomcat\webapps\AwareIM\

I don't use it in startup.html...Either I use a specific .html which I import it in “Banner” section of the Visual Perspective.

In that .html file I enter like this:

This .html is present in banner section (everywhere in app) and in this case I can use bootstrap code in every form, queries of the app. It works on my apps.

Example of a bootstrap button which fires a process from a form I use:
<button type="button" class="btn btn-primary" onclick="AwareApp.startProcessFromForm ('CreateNewInvoice','main', this, true);">Create new invoice</button>

You can find more examples of bootstrap menus, drop-downs, buttons, toolbars, search fields, on bootstrap official site here http://getbootstrap.com/components/

If you need more info or help, please feel free to contact.

Nice day.

robleer

@[deleted]

I was playing a little with this and ideed, your approach works. But what did you mean with 'i use it with form and queries'?
Did you replace all the css classes to the bootstrap classes?

I'm just curious how far you are and if you have more examples I'd like to try that also and work on it.

Regards,

Rob

weblike

Hi Rob,

Bootstrap is great in many things...It's simple, it's looking great and you cand find a lot of examples, documentation on the web.

In forms and queries mostly I use buttons, modals, dropdown buttons, alerts, badges, etc.
It's very simple: In forms you create a html cell where you can put the code of the button like this:
<button type="button" class="btn btn-primary" onclick="AwareApp.startProcessFromForm ('MarkInvoiceAsPaid','main', this, true);">Mark Invoice as Paid</button>

You can find more resources on bootstrap site: http://getbootstrap.com/components/

thank you

robleer

Hi George,

Thanks for your reply. I know what Bootstrap can do and what it is. Your example is a simple button, but what is your idea about displaying grids and other more complex things?

weblike

Hi Rob,

Now I'm trying to create a Dashboard with bootstrap, but what I have not achieved yet is ajax refreshing each element separately (not the entire panel/page):

weblike

Hi,

Henrik has made a Feature request about refreshing the frames&contentpanel in visual perspectives... This would be great feature and would solve many problems with dashboards like I mentioned above.