Skip to Content

!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:</u> The Form item is used to define which HTML item should be displayed for which Alloy Notes form

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

    <u>Fragment:</u> The Fragment item contains the content

       

       

      !https://weblogs.sdn.sap.com/weblogs/images/972/newPanelButton.jpg|height=27|alt=New Panel Data Button|align=left|width=122|src=https://weblogs.sdn.sap.com/weblogs/images/972/newPanelButton.jpg|border=0!Click the New Panel Data button in order to create an own Form item.

       

      !https://weblogs.sdn.sap.com/weblogs/images/972/formDetails.jpg|height=268|alt=Sidebar Form|align=left|width=377|src=https://weblogs.sdn.sap.com/weblogs/images/972/formDetails.jpg|border=0!

      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.

       

       

       

      !https://weblogs.sdn.sap.com/weblogs/images/972/htmlDetails.jpg|height=277|alt=Sidebar HTML|width=668|src=https://weblogs.sdn.sap.com/weblogs/images/972/htmlDetails.jpg|border=0!

       

      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.

       

       

      The last item we need to create is the Fragment.!https://weblogs.sdn.sap.com/weblogs/images/972/fragmentDetails.jpg|height=283|alt=Sidebar Fragment|align=right|width=373|src=https://weblogs.sdn.sap.com/weblogs/images/972/fragmentDetails.jpg|border=0!

      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.

       

       

      !https://weblogs.sdn.sap.com/weblogs/images/972/sidebarSectionName.jpg|height=118|alt=Sidebar Title|align=left|width=215|src=https://weblogs.sdn.sap.com/weblogs/images/972/sidebarSectionName.jpg|border=0

       

       

       

       

       

       

       

       

       

       

      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.

      !https://weblogs.sdn.sap.com/weblogs/images/972/sidebarCodeIndesignerForm.jpg|height=500|alt=Sidebar coding in Designer|width=561|src=https://weblogs.sdn.sap.com/weblogs/images/972/sidebarCodeIndesignerForm.jpg|border=0!

       

      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!

      ” ‘

      Weigthed Pipeline: 3.5M
      Pipeline #                : 7


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

      chartInitStr = chartInitStr + “

      !|PurchasingBudgetInformation=chartInitStr
      Call notesDoc.Save(True,True)

      End Sub
      |chtt= + |src=|cht=p3&chdlp=b&chs=180×200&|chco=557630,844c54,a98284! 

       

      The result will look like this:

      Sidebar customization done

      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.

       

      To report this post you need to login first.

      Be the first to leave a comment

      You must be Logged on to comment or reply to a post.

      Leave a Reply