Menu

Navigation Menus and Trees

There are various ways to create navigation Menus in Sharperlight to organise Published Reports, Dashboards and URL Links into selectable lists.  The first method would be to use the Publisher right click menu ‘Create Menu Report’ to create a simple table list of the specified group of reports.  The second method which this article covers is where you define a Query with the Reports or URL Links that will appear in the Menu together with the style of the Menu.  This second method allows for better flexibility and has four different styles of navigation menu which are Horizontal, Vertical, Panel and Tree.  Whenever the Publisher Default Type is set to one of these Menu styles it will automatically assume that the content of any URL Links or reports will be displayed below or on the right hand side of the menu depending on the style.

The steps for creating a Menu can be summarized as follows:

  1. Create the Reports and Dashboard in Publisher that will later be referenced by the Menu
  2. Create a New Published Report that will serve as the Main Menu
  3. In Query Builder use the Product System and Custom Defined Dataset Table to define the Menu data
  4. Give the Custom Defined Dataset the required Order, Descriptions, Report Links and Icons
  5. In Publisher set the Report / Default Type to Menu Horizontal
  6. Use the Table tab to turn off the Title and set the Menu colour etc.
  7. Use the Report Tab Enable Header to define a Custom Header that will appear above the menu
  8. Test the Menu and the Report links by copying the URL Link on the Links tab
  9. Try changing the Report / Default Type to Menu Vertical, Menu Panel or Tree​

Note:  At the end of this article more advanced Filter Selector types of Trees and Menus are discussed

Example of Menu Horizontal 

Menus-DefaultTypeHorizontal.png

Menus-Example.png

Example of Menu Vertical

Menus-DefaultTypeVertical.png

Menus-ExampleVertical.png

​Example of Menu Panel

​Menus-DefaultTypePanel.png
​​Menus-ExamplePanel.png

​Example of Menu Tree

​Menus-DefaultTypeTree.png
Menus-ExampleTree.png

Step 1: Create the set of Published Reports that will be used in the Menu

The Menu will allow the user to navigate to the various Report by using their Report Group and Code in a URL Link in the next step​

Menus-PublisherList.png

Step 2 and 3: Create the Published Report Menu   (TrainF6.MainMenu)

Menus-CstomDefinedDatasetTable.png

Step 4: Define the menu dataset

Custom Defined Dataset uses a simple CSV format where the first Row defines the Columns and their data types.    Notice the suffix defines the Data Type of the Column for Example ::Int is for a Integer and ::String for Text columns and ::Url for the Links and ::Icon for the Icons

The basic columns are as follows

  1. Order::Int  – Defines the order in which the menu items are shown.  This output is used in the sort
  2. Main Menu::String – This is the description that will appear at the root level of the menu
  3. Sub Menu – The Sub Menu description.  Notice you need to repeat the Main Menu description and dont forget the Order number.
  4. URL::Url – This is the link to the Published Report or Dashboard.  Notice it will be generally be /Report/?query=Group.Code tho It can also be a full URL address
  5. Icon::Icon – The Icon is optional and is in the format of “_icon:code“ where code is one of the codes found in this list​  In addition to icons there are also around 700 different CSS font based icons that can be used.  To use these icons use the prefix k-i-  or fa-.   For example k-i-check-circle or fa-star   Do not use the _icon: prefix for these CSS based icons.  If is also possible to provide your own custom icons and images by creating a Custom folder under the Metadata folder in C:\ProgramData\SharperLight\Metadata\Custom.  Once this is done set the url to locate this image file or point to one on a web site like this.    http://sharperlight-ir/mdService1Rest/File/Custom/MenuA12.png

Note: There are other columns types which are optional and are used for things like controlling what is collapsed or expanded by default in trees and if the report is to be opened in a new Tab for example.  Also if you require the URL address to open in a new Tab and not the default space please add &openInNewWin=1​ to your URL address

The rows following the Header row define the data that will define the Menu.

Menus-CstomDefinedDatasetData.png

Copy and Paste this example below and modfiy it for your requirements

“Order::Int”, “Main Menu::String”,”Sub Menu”,”URL::Url”,”Icon::Icon”
 
1000, “Invoices”,””,””,”_icon:Form_Blue”
1010, “Invoices”,”Invoices”,”/Report/?query=TrainF6_TRAN.Invoices&showGroups=1″,””
1020, “Invoices”,”Invoice Distributions”,”/Report/?query=TrainF6_TRAN.InvoiceDist”,””
1030, “Invoices”,”Invoice Payments”,”/Report/?query=TrainF6_TRAN.InvoicePay”,””
 
2000, “Purchases”,””,””,”_icon:Form_Green”
2010, “Purchases”,”PO Orders”,”/Report/?query=TrainF6_TRAN.Purchases”,””
2020, “Purchases”,”PO Distributions”,”/Report/?query=TrainF6_TRAN.PODist”,””
2030, “Purchases”,”PO Receipts”,”/Report/?query=TrainF6_TRAN.POReceipts”,””
2050, “Purchases”,”PO Requisition”,”/Report/?query=TrainF6_TRAN.POReq”,””
2090, “Purchases”,”PO Top Vendors”,”/Chart/?query=TrainF6_CHART.POVendors”,””
 
6000, “Inventory”,””,””,”_icon:Company”
6010, “Inventory”,”Inventory Items”,”/Report/?query=TrainF6_TRAN.Inventory&showGroups=1″,””
6020, “Inventory”,”Inventory Transactions”,”/Report/?query=TrainF6_TRAN.InventoryTrans”,””
 
9900, “Information”, “”, “”, “_icon:Information”
9910, “Information”, “Web Site”, “https://www.sharperlight.com”, “_icon:Sharperlight”

9920, “Information”, “Help”, “https://www.sharperlight.comhelp/”, “_icon:Attribute”

Output the Menu Items

Set Order as the first Output so that the menu is sorted by Order and then use the Right Click menu to Hide the Output

The Menu will assume the first few columns will define the description levels of the Menu.  It will know what URL Links and Icons to display by the Column data types
 
 

Menus-CstomDefinedDatasetOrder.png

Preview the Menu Dataset

Menus-CstomDefinedDatasetPreview.png

Step 5: Set the Default Type to Menu Horizontal

Define this default report or URL content to be displayed​.  This will appear before anything has been selected in the Menu and is usually some sort of Summary dashboard or information about how the page is used.

Menus-PublisherDefaultContent.png

Step 6: Use the Publisher Tables Tab to fine tune the Font Size, Menu Colours and Width

The Table attributes are used to override the styling attributes of the Menu.  Notice that if the Menu Vertical, Pane or a Tree then Auto Margin width can be used to override the default width of the area on the left.  Also note that Height in pixels can also be used to define how deep the content area should be which is useful when the content is very long and is being cut off

Menus-PublisherStylingAttributes.png

Step 7 and 8: Create a Custom Header Section to appear above the report and Test

Remember to remove the tags below from the template at the top and bottom otherwise the header will not appear above the Menu

<!–ReportPromptSectionBegin–>​

<!–ReportPromptSectionEnd–>

Menus-PublisherHeader.png

 

Advanced Concepts

Because Menus and Trees are based on any Query Builder dataset it is possible to use any Table to define the structure of the Menu or Tree.  This is very useful when using a Tree to navigate categories and sub categories of data in a database system.  For example you may want to display a Report based on the user selecting a node in the Tree where the Root nodes are the Regions with Locations under the Region.  In this case Query Builder uses an Expression to build the Report URL address and adds the filter Region and Location codes to it.  In this way each node of the Tree has an unique URL address that is ready to start the Report with a specific set of Filter values.  It is also possible to say show a different Report URL address if it’s for the whole Region as opposed to a Location node selection.  In this way the Tree or Menu functions as a type of one click Filter silcer to help uses skip from category to category.

Define a Query where the Dataset has levels that can be used in a Tree

The Company and Account will be passed as Filter Parameters into the Expression that creates the URL​​.  Notice the Account code is hidden as this does not form the tree structure but is just there to get the filter criteria

Menus-TreeQueryOutputs.png

Create a URL Expression

The Company and Account are passed as Filter Parameters to the Expression that creates the URL​ for the target report.  The URL Expression can be made more complex by returning different URL Links if it’s not a Leaf node of the tree.  For example a Summary Dashboard or Chart​ when the second column is Blank or Null

“/Report/?query=TrainF6_TRAN.GLTrans”
+ “&fltCompany=” + UrlEncode( {@staging-sharperlight-com.stackstaging.comCompany} )
+ “&fltAccount=” + UrlEncode( {%AccCod} )
+ “&fltAccount_2=” + UrlEncode( {%AccCod} )

 

Menus-TreeQueryUrlExpression.png

Preview the Dataset

Even if your dataset does not have blanks like this for the child nodes it will still work in the Tree or Menu.  It’s just that you can’t have different URLs for the root nodes in those cases

Make sure this Account Output is hidden so it does not get into the Tree as It is just required for the passing of filter values

Menus-TreeQueryPreview.png

Preview the final result in the Web Channel

Each node of the Tree has a URL report address with the Company and Account filter criteria​

Menus-TreeWebPageResults.png

Controlling with nodes are Collapsed or Expanded

If the Output Name is set to State then it’s value will be used to control if the Tree node is Collapsed or Expanded.  The default is Collapsed​

In this example the Expression is looking for label Cost of Sales or Liabilities in the Root Node and setting all these nodes to be Expand

​Menus-TreeStateExpression.png

Preview Dataset Results and notice the Stage values

Menus-TreeStateResultPreview.png

Preview Web Channel Results

The State for this node Cost of Sales was Expand

Menus-TreeStateWebPreview.png

Note: If you require a URL Link to open in a new Tab and not the space on the right hand side add &openInNewWin=1 to the URL address

Other Reference:

Published: 21/05/2016 2:12 PM

Related Posts

Privacy Preference Center

Consent Management

It is Sharperlight’s policy to respect your privacy regarding any information we may collect while operating our website. Accordingly, we have developed this privacy policy in order for you to understand how we collect, use, communicate, disclose and otherwise make use of personal information.


Sharperlight Terms of Service and Privacy Policy

1. Terms

By accessing the website at http://www.sharperlight.com/, you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site. The materials contained in this website are protected by applicable copyright and trademark law.

2. Use License



Permission is granted to temporarily download one copy of the materials (information or software) on Sharperlight's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:


modify or copy the materials;
use the materials for any commercial purpose, or for any public display (commercial or non-commercial);
attempt to decompile or reverse engineer any software contained on Sharperlight's website;
remove any copyright or other proprietary notations from the materials; or
transfer the materials to another person or "mirror" the materials on any other server.


This license shall automatically terminate if you violate any of these restrictions and may be terminated by Sharperlight at any time. Upon terminating your viewing of these materials or upon the termination of this license, you must destroy any downloaded materials in your possession whether in electronic or printed format.


3. Disclaimer


The materials on Sharperlight's website are provided on an 'as is' basis. Sharperlight makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.
Further, Sharperlight does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the materials on its website or otherwise relating to such materials or on any sites linked to this site.


4. Limitations

In no event shall Sharperlight or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on Sharperlight's website, even if Sharperlight or a Sharperlight authorized representative has been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.

5. Accuracy of materials

The materials appearing on Sharperlight's website could include technical, typographical, or photographic errors. Sharperlight does not warrant that any of the materials on its website are accurate, complete or current. Sharperlight may make changes to the materials contained on its website at any time without notice. However Sharperlight does not make any commitment to update the materials.

6. Links

Sharperlight has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Sharperlight of the site. Use of any such linked website is at the user's own risk.

7. Modifications

Sharperlight may revise these terms of service for its website at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service.

8. Governing Law

These terms and conditions are governed by and construed in accordance with the laws of Australia and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.

Privacy Policy

Your privacy is important to us.

It is Sharperlight's policy to respect your privacy regarding any information we may collect while operating our website. Accordingly, we have developed this privacy policy in order for you to understand how we collect, use, communicate, disclose and otherwise make use of personal information. We have outlined our privacy policy below.


We will collect personal information by lawful and fair means and, where appropriate, with the knowledge or consent of the individual concerned.
Before or at the time of collecting personal information, we will identify the purposes for which information is being collected.
We will collect and use personal information solely for fulfilling those purposes specified by us and for other ancillary purposes, unless we obtain the consent of the individual concerned or as required by law.
Personal data should be relevant to the purposes for which it is to be used, and, to the extent necessary for those purposes, should be accurate, complete, and up-to-date.
We will protect personal information by using reasonable security safeguards against loss or theft, as well as unauthorized access, disclosure, copying, use or modification.
We will make readily available to customers information about our policies and practices relating to the management of personal information.
We will only retain personal information for as long as necessary for the fulfilment of those purposes.


We are committed to conducting our business in accordance with these principles in order to ensure that the confidentiality of personal information is protected and maintained. Sharperlight may change this privacy policy from time to time at Sharperlight's sole discretion.