The one with the Alloy sidebar

DirkLehmann · ‎2009 Aug 12

!https://weblogs.sdn.sap.com/weblogs/images/972/sidebarCustomized.jpg|height=466|alt=Alloy sidebar in action|align=left|width=262|src=https://weblogs.sdn.sap.com/weblogs/images/972/sidebarCustomized.jpg|border=0!Most probably you already know that the context related Alloy sidebar holds further information for you depending on the document you've currently opened. But the data there seems to be static and not customizable. This is wrong.

In fact Alloy offers a lot of entry points (yet, again) for you to customize the sidebar pending on your projects needs. Often the sidebar can be perfectly used to display further (or additional) information to the end user. And the best, this information can be context related to the current document.

Take a look at the example screenshot given on the left. The Alloy sidebar contains the common My Approvals section and below some customized Budget section. The data shown there comes from the SAP Backend via the common Alloy mechanisms and get visualized at the Alloy sidebar.

Let's work this out.

!https://weblogs.sdn.sap.com/weblogs/images/972/NDERPpanel.jpg|height=194|alt=NDERP Sidebar Panel|align=right|width=275|src=https://weblogs.sdn.sap.com/weblogs/images/972/NDERPpanel.jpg|border=0!In the NDERPws application you can find a section called Sidebar Panel that contains two views. Open the Panel Data view and you'll see some predefined settings.

What do we have here?

Basically there're three kind of items here:

Form: The Form item is used to define which HTML item should be displayed for which Alloy Notes form

HMTL: The HTML item defines which Fragment items should be displayed (and in which order)

Fragment: The Fragment item contains the content

Select Form from the Type field.
In Type ID you're required to name the Notes form name (or Alias name), for which this Form item should be called.

In the example we've entered PurchApproval which is the alias name for one of our custom generic decision workflow forms. Every time a PurchApproval Notes form is opened, this Form item is called to fill the Alloy sidebar.

Property Value should be filled with the name of the HTML item we're going to display. So the name here must match to an existing HTML item (we'll create the HTML item later).

Property Roles allow you to specify Content groups which are allowed to see this Form item. So with that e.g. a manager gets the information in the sidebar, while the employee does not.
The Language field specifies the content language of this Form item.

Press Save & Close Button at the top and create another item by pressing New Panel Data again.

Now we're going to specify the HTML item, to which we already referred to earlier.

The Type field should be now set to HTML. The Type ID must be the same as specified earlier in the Form item. In the Property Value field you can now specify which Fragment items should appear (and in which order). In the example screnshoot we first make use of the predefined SS_MYAPPROVALS Fragment (which will appear as My Approvals in the Alloy sidebar) and then add our own Fragment item, which we'll create later. All other fields can be left blank for our example.

Press Save & Close Button at the top and create another item by pressing New Panel Data again.

So we set the Type field to Fragment and set the Type ID to the Fragment name which we specified at the HTML item.

The value of the field Property Value will later be used for the sidebar section name, as seen in our example screenshot below.

The Property HTML field can now be filled with HTML tags in order to display the data in the sidebar. But this data would be static as it wouldn't have access to the current documents' data. In order to display document data in the sidebar, we've to dig a bit deeper.

The Alloy Sidebar allows us the display any HTML data contained in the current document, as long as the documents' fieldname equals a valid Fragment item name.
For a better understanding let's look again in our example. We've created a Fragment item called PurchasingBudgetInformation, that should be displayed underneath the My Approvals section in the Alloy sidebar, whenever the Notes form PurchApproval is opened.

So all we need to do is add some HTML code in a field called PurchasingBudgetInformation to the users' document.

Knowing that, we can now use the full power of Lotus Domino Designer (Lotus Script, Java, ...) to enhance the Alloy sidebar with some additional data.

Therefore we open the Notes form +PurchApproval +in Domino Designer.

Here we add some coding in the e.g. Queryopen section that will grab some data from the current document which was send out by SAP and create some nice HTML around it.
Again, what does the trick now is, saving the HTML we've created in our coding to the document under the Fragment item name (PurchasingBudgetInformation).

Here's some example coding that uses Googles' Chart API for creation of a nice pie chart, as seen in our example screenshots.
Note the two last lines!

Sub setBudgetInformation(notesDoc As NotesDocument) Dim chartData As String Dim chartInitStr As String Dim ChartEndStr As String Dim ChartLabels As String Dim itemTypes As NotesItem Dim itemsTotal As NotesItem Dim budget As NotesItem Dim budgetSpend As NotesItem Set itemsTotal = notesDoc.GetFirstItem("WF_ITEMS_TOTAL_NET_VALUE") Set budget = notesDoc.GetFirstItem("WF_BUDGET") Set budgetSpend = notesDoc.GetFirstItem("WF_BUDGET_SPEND") Dim itemTotalPercentage As Double Dim budgetPercentage As Double Dim budgetSpendPercentage As Double ' Calculate the percentage values for budget and items value (Google Chart only takes values from 0 to 100 in the data section) itemTotalPercentage = Cdbl(itemsTotal.Values(0)) / ( (Cdbl(budget.Values(0))) / 100.0 ) itemTotalPercentage = Round (itemTotalPercentage , 2) budgetSpendPercentage = Cdbl(budgetSpend.Values(0)) / ( (Cdbl(budget.Values(0))) / 100.0 ) budgetSpendPercentage = Round (budgetSpendPercentage , 2) budgetPercentage = 100 - itemTotalPercentage - budgetSpendPercentage budgetPercentage = Round (budgetPercentage , 2) Dim budgetPercentageString As String budgetPercentageString = Cstr(budgetPercentage) Call ReplaceSubstring(budgetPercentageString,",", ".") Dim budgetSpendPercentageString As String budgetSpendPercentageString = Cstr(budgetSpendPercentage) Call ReplaceSubstring(budgetSpendPercentageString,",", ".") Dim itemTotalPercentageString As String itemTotalPercentageString = Cstr(itemTotalPercentage) Call ReplaceSubstring(itemTotalPercentageString,",", ".") ' Pie Chart ChartLabels = "chdl=Total Budget (" + budget.Values(0) + " EUR) | Spend Budget (" + budgetSpend.Values(0) + " EUR) | Current Order (" + itemsTotal.Values(0) + " EUR)" ChartEndStr = "alt=""Revenue Information"" />" '

Weigthed Pipeline: 3.5M
Pipeline # : 7

"
chartData = "chd=t:" + Cstr(budgetPercentageString) + "," + Cstr(budgetSpendPercentageString) + "," + Cstr(itemTotalPercentageString) + "&"

chartInitStr = chartInitStr + "

The result will look like this:

Data taken from the opened document (Net Order Value) is used not only to be displayed in a table on the document, but also in conjunction with budget data (send along from SAP side, but not displayed in any field on the Notes form) in the Alloy sidebar.