Creating Anchors and Links

Objective

After completing this lesson, you will be able to implement anchor links using the UI API in SAP Business One, Web client to enhance navigation efficiency within and between views.

Anchors

Anchors in SAP Business One, Web client UI API allow you to create links that navigate directly to specific sections within a view. This significantly improves the user experience by enabling quick access to relevant information without requiring users to manually search for it. Imagine a scenario where a user needs to frequently access the payment information from a sales order. Instead of scrolling through multiple tabs, an anchor link can instantly direct them to the payment details section. This streamlined navigation improves efficiency and usability.

Benefits of Using Anchors

Anchors provide several key benefits:

  • Improved User Experience: Faster and more intuitive navigation within views leads to increased user satisfaction and productivity.
  • Enhanced Efficiency: Users can quickly access specific information, reducing the time spent searching.
  • Streamlined Workflows: By directly linking related sections within different views, anchors can create more efficient workflows.
  • Contextual Navigation: Maintaining context is crucial when navigating between views. Anchors help preserve this context by directing users to the relevant section in the target view.

Process of Creating an Anchor Link

The process of creating an anchor link involves several steps:

Four steps for creating an anchor link as described in the following text.
  1. Identify the Target Section: First, you need to identify the specific section within the view you want the link to point to. This often involves inspecting the view's structure to find the unique identifier (GUID) of the target section.
  2. Generate the Anchor Link: The UIAPI provides a mechanism to generate a URL that includes the target section's identifier. This URL is then used to create the link. The structure of the URL typically includes parameters specifying the view and the target section.
  3. Implement the Link: The generated anchor link is then implemented within the custom UI extension. This might involve adding a button or a hyperlink that, when clicked, opens the target view at the specified section.
  4. Test and Refine: Thorough testing is essential to ensure the anchor link functions correctly and directs users to the intended section. This may involve iteratively refining the link's parameters to achieve accurate navigation.

How to Create Anchors and Links

The following video shows you how to create and implement anchor links using the SAP Business One, Web client UI API. The video covers two scenarios:

  1. Creating a link within a single view. For example, adding a button called Go to Payment Run in the business partner detail view under a new section. When clicked, it will take users directly to the Payment run section within the view.The “Go to Payment Run” button in the business partner detail view under the section called “New Section”.
  2. Creating a link that opens a related view at a specific section. For example, adding a button called Anchor button in the sales order detail view. When clicked, it will open the business partner detail view in a new browser tab, automatically focusing on a specific point within this view – the Payment Run tab. This allows us to quickly navigate between related views while keeping the context of the original document.The new button called “Anchor button” shown at the top of the sales order detail view.

This scenario uses a source code sample that you can download here: Anchor Sample.

Summary

  • Anchors allow you to create links that navigate directly to specific sections within SAP Business One, Web client views.
  • Creating an anchor link involves identifying the target section, generating the anchor link URL, implementing the link in a custom UI extension, and testing the functionality.
  • Anchor links can be used for navigation within a single view or to navigate to a specific section in a related view.
  • Anchors maintain context when navigating between views.

Learning

SAP FacebookSAP YoutubeSAP LinkedIn