Name: Working with Templates and Virtual Sockets in Backoffice Framework in SAP Commerce Cloud
Uploaded: 2021-3-25
Duration: 369 s
Description: In this video, you'll learn how widget templates work by changing the default behavior of the Editor Area to open a separate tab for each element selected in the list view. Within the context of template widgets, you'll also learn about virtual sockets since they are usually used in conjunction with template widgets.

Share feedback

<p><u><strong>Planned maintenance of Practice Systems</strong></u></p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div><div><div>In this video, you'll learn how widget templates work by changing the default behavior of the Editor Area to open a separate tab for each element selected in the list view. Within the context of template widgets, you'll also learn about virtual sockets since they are usually used in conjunction with template widgets. </div></div></div></div></div>

Working with Templates and Virtual Sockets in Backoffice Framework in SAP Commerce Cloud

Hi, my name is Lily. In this video, I'll demonstrate how widget templates work by changing the default behavior of the editor area to open a separate tab for each element selected in the list view template. Widgets are used to generate a series of widget instances based on a reaction to interactions with a template widget through its sockets. Think of a widget factory that produces a new widget instance every time a specific event happens. Although all of the widgets produced are of the same type, the widgets might look quite different to one another. This is because the actual widget instance generated will have its user interface configured based on the context provided. Widget templates are an advanced concept that is best understood through a demonstration. I'll navigate to the application orchestrator to create a widget template. You need to start with an existing normal widget. I'll click the cube icon for the widget. You can see that the widget now has a border added to it to indicate its new nature as a template, I'll right click on the cube icon to open a dialog that allows us to configure behaviors related to socket events, such as the creation and closing of the widget instances. There are two types of template widgets that you can create. Popups a widget template placed within the Invisible Children slider, or a parent widget is rendered in a popup. Tabs. A widget template placed in a tab container will have its widget instances rendered as tabs. The usage of template widgets is only for widgets that have a user interface. To demonstrate how widget templates work. Let's change the default behavior of the editor area to open a separate tab for each element selected in the list view. To do this, we need to temporarily remove the editor area and put a tab layout container widget in its place. I'll drag the editor area onto the widget clipboard, which copies the widget in all of its settings. Now I'll place a tab layout widget where the original editor area was, because we want to generate a new tab containing an editor area instance. Each time a new element is selected in the list view. We need to place the editor area within the tab layout widget and tell it to become a template. Once the widget is in place, I'll go to the widget clipboard and drag and drop the widget to the tab layout as a child widget. Then I'll tell the editor area widget to become a template by clicking on its cube icon. Finally, I'll right click the icon and change the templates behavior so that it only creates a new tab with editor area instance. When a new input object is received on its socket. I'll uncheck Reuse existing because we want it to create a new tab, rather than reload in an already existing tab. Now I'll exit application orchestrator. We can search for products and open a few for editing. As you can see, each product's fields get displayed in a separate tab than expected. Within the context of template widgets. We also need to mention virtual sockets. This is because virtual sockets are often used in conjunction with template widgets. Virtual sockets are similar to the regular sockets that you have seen declared in the widgets definition. XML file. The primary difference between the two sockets is that virtual sockets can also be created at runtime for a specific widget instance. This gives us a lot of flexibility and allows us to extend the capabilities of widgets. To demonstrate how to create virtual sockets, I'll go back to Application Orchestrator and click the pencil icon of any widget to edit it. Settings. When I switch to the Virtual Sockets tab, we can see that we have the capability to add new sockets at runtime. I'll add a new virtual socket. We need to select a kind of socket, meaning whether it is an input or output socket. I'll give it a unique key for this widget. I'll select the type of value that will be received from the socket, such as Java dot length, integer. Finally, I'll specify the multiplicity of the socket. This means whether the value being received on the socket would be in the form of a single value. A collection A list, or a set. Once you created your socket, now you can immediately begin configuring connections for it. Before connecting virtual sockets, you should be aware of their proper usages and limitations. Virtual input sockets cannot be used in widget controllers. This should be used only to trigger actions on template widgets. For example, to show the widget as a popup virtual output sockets can be used to communicate with other widgets via the controllers send output method, but the names of the available output virtual sockets must be passed to the widget. For example, the names of the available output virtual sockets could be passed via the widget settings in the context. An example usage of this pattern can be seen in the multiplexer widget. In this video, I demonstrated how widget templates work by changing the default behavior of the editor area to open a separate tab for each element selected in the list view. Thanks for watching.