Creating and Using Widgets › Embedding Widgets for Requesting Services and Managing Requests › Use the Request Widget to Let Users Request Services › Call the Browse Widget Using Source Code

Call the Browse Widget Using Source Code

In Liferay, you can call the Browse widget by creating the portlet and specifying the source code. Review the following steps for producing the earlier Browse widget example. Follow them as a model to configure the display and behavior of the Browse widget in your implementation.

Follow these steps:

1. On the portal page, perform these actions to create the portlet:
   1. Click Add, Web Content Display.
   2. Click the plus icon (Add, Web Content).

      The New Web Content window appears.

   3. Specify the required fields and close the window.

   The new portlet gets added to Liferay.

2. Click Edit Controls at the top of the page.
3. Mouse-over the portlet, and click the pencil (Edit Web Content) icon.

   The portlet Settings appears.

4. In the Content window, click Source.

   The Source container opens for editing.

5. Review the following source and key parameters for the earlier Browse widget example. Use them as a model to specify your source.
6. Perform the following actions:
   • Close the Source container.
   • Publish and review the updated portlet.
   • If necessary, refine your specifications until the widget meets your requirements.

Source and Key Parameters

The source for the Browse widget example follows:

<script type="text/javascript" src="http://hostname:portnumber/usm/explorer/scripts/browse.widget.js"> </script>

<script type="text/javascript"> CA_Catalog.buildWidget({type: 'browse', renderTo: 'browse1', login credentials, businessUnit:’London222", rootId: 10001, linkColor: 'inherit', borderColor: 'black', layout:'layout-1', openIn:'_widget', search: true } ); </script>

<div id="browse1" style="margin-bottom: 10px; height: 700px">
	&nbsp;</div>

The first line references the JavaScript file for the Browse widget.

The second line specifies the JavaScript with configuration parameters for the Browse widget.

Note: Separate parameters with a comma, but do not specify a comma after the last parameter.

The third line specifies the DOM element in which the Browse widget is rendered.

Key parameters and explanations follow for the CA_Catalog.buildWidget function call in the Browse widget example.

login credentials

We recommend single-sign-on for widgets. However, if you require login credentials for this widget, specify them in this function call. Use the following format:

username: 'username', password: 'password'

businessUnit:"London222"

Specifies the business unit that catalog users can access while utilizing this Browse widget. Users can browse services in all folders in this business unit.

For example, if you specify the root business unit, catalog users can browse services from all folders in all business units, including the root business unit. Conversely, if you specify the name of the lowest level business unit, catalog users can browse services from folders in that business unit only.

If you do not specify a value, the Catalog system uses the default business unit of the user accessing the widget.

type:"browse"

Specifies that the widget is a Browse widget.

renderTo:"browse1"

Specifies that the widget is rendered into the DOM element whose ID is browse1.

rootId:10001

Specifies the object ID of the folder or service that the Browse widget displays. In this example, 10001 is the root folder of the catalog of the business unit.

You can specify either a single folder or a comma-separated list of services, using their object IDs.

The folder or service that you specify must exist in a business unit that the user can access, as explained in the Business Unit parameter.

Note: You can optionally hide the tree (the list of folders on the left). To hide the tree, specify the hideTree:true parameter. By default, this parameter is set to hideTree:false.

layout:'layout-1'

Displays the icons and names of the services that appear in the Browse widget.

Alternatively, specify layout-2 to display the names, icons, and descriptions of the services.

openIn:"_widget"

Specifies that another widget on the same page listens to events from the Browse widget and responds to them. In this scenario, when the user clicks a service, the Request widget responds by opening the service. You must add the Request widget to this page to enable this function.

OpenIn specifies how a service opens in the Request widget when the user clicks the service on the Browse widget. Other possible values for the openIn parameter follow:

_self

Opens the service in the catalog, on the same page.

_top

Performs the same function as _self, except that it opens in the top-most frame of the browser. If the service is a frame, then the first associated frame in service option element is selected.

_blank

Opens the service in the catalog, on a new page. The user request the service on that page.

_url

Opens the service using a custom URL. The URL can include a placeholder for the object ID of the service. An example follows:

http://www.google.com?id={id}

search: true

Specifies that the Browse widget includes the Search field. Users can use this field to search the catalog for services, according to names or key terms.

Note: You can also specify the following settings, as shown in the source code: show featured offerings, link color, border color, and background color.