MuseSearch™ Widget Demo #3 – Enhanced the widget to show Search Progress and be able to fit in a jQueryUI object (e.g. a “dialog” window)

We have enhanced the widget to show Search Progress and be able to fit in a jQueryUI object (e.g. a “dialog” jQueryUI window).

The widget is initiated with the “true” value for the the new added option SHOW_PROGRESS that means the Search Progress functionality is available in a new tab after the user cliks on Search icon.

Install files

Installing the MuseSearch™ widget is actually pretty simple. You just need to add the following code to the <head> of your web page:

<link rel="stylesheet" href=""/>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href=""/>
<script src=""></script>

This will make sure all the required files are loaded properly.

Add markup

The HTML markup for the MuseSearch™ widget is also very simple. You simply need to create a <div> with an id (EmbededMSWidget in this case). In this demo we added the MuseSearch™ widget in a jQueryUI “dialog” object. For that we created a <div> with EmbededMSWidgetPosition id in witch the MuseSearch™ will be opened.

<div id="EmbededMSWidgetPosition" style="width: 600px; height: 400px"></div>
<div id="EmbededMSWidget" title="MuseSearch™"></div>

Hook up the widget

Because the access to Muse Web Bridge is CORS protected, if you want to test this widget against our Muse installation on let us know which is your container web page address (protocol://FQDN:port) so that we add it to our CORS ACLs. If you want to test it against your local Muse Q&A system let us know to provide you with an application patch. Finally you need to hook up the widget by adding the following code after the EmbededMSWidget div we created.

URL: "", // Server URL
USER_ID: "MSWidget", // User ID
USER_PWD: "lzOoUwTu7E/UvHCw9KpOsmoEbl4=", // User Password
USER_PWD_ENCRIPTION: "SHA1", // User Pasword Encription. Values: "" | "SHA1"

WIDGET_PLACEDOLDER: "#EmbededMSWidget", // The Placeholder where the Widget will be displayed. Values: body | #ID (The ID of a HTML element such as DIV, SPAN, TD, P)

RESULTS_PER_PAGE: 10, // Results per page
RESULTS_PER_SOURCE: 10, // Results per source
USE_PAGINATION: "true", // Use Pagination. Values: "false" | "true". The "false" value means that an infinite scroll is used for the result set list. The "true" value means that the result set list is displayed in multiple pages.
SHOW_PROGRESS: "true" // Show Search Progress in another tab.

resize: mSWidget.resize,
dialogClass: "no-close",
position: { my: "left top", at: "left top", of: $mj("#EmbededMSWidgetPosition") },
height: 400,
width: 600

This entry was posted in Blog, The Muse Platform. Bookmark the permalink.

Comments are closed.