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="http://demo.museglobal.ro/muse/logon/MuseSearch/skins/redmond/jquery-ui.css"/>
<script src="http://demo.museglobal.ro/muse/logon/MuseSearch/javascripts/jquery.js"></script>
<script src="http://demo.museglobal.ro/muse/logon/MuseSearch/javascripts/jquery-ui.js"></script>
<link rel="stylesheet" href="http://demo.museglobal.ro/muse/MSWidget/MSWidget.css"/>
<script src="http://demo.museglobal.ro/muse/MSWidget/MSWidget.js"></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 http://demo.museglobal.ro/muse 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 2.7.0.0 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.

<script>
mSWidget.init({
URL: "http://demo.museglobal.ro/", // 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.
})
</script>

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

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

Comments are closed.