Changes

Custom Icon Bar

5,152 bytes added, 21:55, 4 July 2016
no edit summary
All the variations are for the different interface bars [[Interface_Bars#System_Access_Management_based]]
 
 
= The redirects =
 
 
Each icon has a default folder. The engine finds the "index.asp" of each folder and that's the module menu. From there each function has it's own page.
 
 
So using the reference for module 016, security is the folder... so /security/index.asp will be the menu of the System Access Management module.
 
 
 
= Your Icon Set =
 
 
So the option then becomes about what you want to do with your icons. Reuse the existing ones with a twist or replace them altogether.
 
 
== System HTML Bar ==
 
 
You can develop a static menu icon set for all users. It will not show or hide access but makes the menu consistent.
 
Upload your icon images though the Custom engine to get them onto the bxp servers.
 
 
Add your custom HTML to Main Menu > System Access Management > System Management > System Settings > System Headers and Footers. Drop your code into the Page Header or Page Footer.
 
 
Note : This content also appears on the login page.
 
 
 
Pros:
* Quick setup system wide for all users
 
 
Cons:
* Not dynamic with security permissions
* Appears every where
* Be careful your bar doesn't obscure existing useful links / content
 
 
 
=== Sample code for Header ===
 
 
<syntaxhighlight lang="html4strict" >
<div style="top:0;left:0;position:fixed;_position:absolute;height:35px;width:100%;background-color:#ff0000;text-align:center;" >
Put your header here
<a href="../security/index.asp" title="Security"><img src="https://ww3.allnone.ie/images/buttons/016.png" border=0></a>
</div>
</syntaxhighlight>
 
 
 
=== Sample code for Footer ===
 
 
<syntaxhighlight lang="html4strict" >
<div style="bottom:0;left:0;position:fixed;_position:absolute;height:35px;width:100%;background-color:#ff0000;text-align:center;" >
Put your footer here
<a href="../security/index.asp" title="Security"><img src="https://ww3.allnone.ie/images/buttons/016.png" border=0></a>
</div>
</syntaxhighlight>
 
 
== eCourse Asset Bar ==
 
 
The next option is to use the eCourse Asset option. In this case you build your menu bar as an asset in an eCourse. It is important to note the Asset Id number of the bar when it is created.
 
 
# Create an eCourse, with one book, one chapter, one page.
# Go to the page and "Add Text to this Page"
# Click the <> icon and paste in your HTML
# Click Add asset
# In tiny writing on the page you'll get a bar of information like
 
Code : [233-530-2972-2945] Revision : [1] Author : [Philip Lacey] Created : [2016-07-04 19:54:40] Last Editor : [Philip Lacey] Last Edit : [2016-07-04 19:54:40] Name : [Menu Bar Demo]
 
You want the fourth block of data... i.e. the 2945
 
 
Armed with your asset Id you can now make it a system level asset or a user level asset.
 
 
* System Level: Main Menu > System Access Management > System Settings > User Interface
* User Level: Main Menu > System Access Management > User Administration > Edit User - Security Details > Choose your user > Interface Options >
 
 
Now into the set of interface bars you can add 23-2945 The 23 part is to display an eCourse asset and the 2945 was the asset you created.
 
 
In this way you can get very specific with your setup. i.e. grouping users to see what bars.
 
 
You can also use the interface bars to turn off the system module icons i.e. remove Interface Bar 13 and the system module bar will disappear.
 
 
Pros:
* Detail level of control
 
Cons:
* Not dynamic with security permissions
* Custom configuration by user makes large user base management more difficult
 
 
 
== Control Bar - Icon Bar ==
 
 
The Control Bar on the main menu can be also tailored. Using interface bar 14 you can set very custom buttons up with colour and custom graphics.
 
 
 
== Control Bar - Big Buttons ==
 
 
Big Buttons, Interface bar 38, also allow you really easy background image configuration for simple iconography.
 
 
 
== JavaScript ==
 
 
Using the same Page Header / Footer approach you can use JavaScript to change the icons in bar 13.
 
 
iconbar_ are the icons in the bar. On the top of each page, to indicate the module you're in, there is a bread crumb. To change the bread crumb icon as well you need to add the iconmodule_ equivalent as well.
 
 
The first check in the JavaScript also allows you to ensure the item is actually on the page before you do the change. This handles most of the JavaScript errors that might occur from applying this code.
 
 
<syntaxhighlight lang="html4strict" >
<script>
if ( document.getElementById("iconbar_016") ){ document.getElementById("iconbar_016").src = "../custom/newicon.png"; }
if ( document.getElementById("iconmodule_016") ){ document.getElementById("iconmodule_016").src = "../custom/newicon.png"; }
</script>
</syntaxhighlight>
 
 
Pros:
* Maintains system level security control of icons
 
Cons:
* Adds code to every page
* JavaScript gives every page a bit more work to do.
 
 
 
= Summary =
 
 
There are many ways of adding icon bars and playing with the icons in bxp. It's about finding the most appropriate and convenient solution that works for your system.
 
 
Please feel free to give us a shout on +353 1 429 4000 or email support@bxpsoftware.com to see how we can help you find a solution for you.
 
 
[[Category:Topic:bxp Interface]]
7,528
edits