MuseSearch™ Widget Demo #4 – The widget with Bootstrap.js
A new MuseSearch™ widget based on the Responsive CSS Bootstrap technology and jQuery is available. The widget works with Muse version 2.7.0.0 and with the MuseSearch™ Application version 3.9.
In the below example the widget was included in an iFrame element because the EduLib website uses the jQuery UI library which may conflict with the Bootstrap technology.
A simple Bootstrap page that has included the new MSWiget version is available at: https://demo.museglobal.ro/muse/MSWidget/MSWidgetBS.html.
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:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//demo.museglobal.ro/muse/MSWidget/MSWidgetBS.css">
At the bottom of the file include the following files:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//demo.museglobal.ro/muse/MSWidget/MSWidgetBS.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="EmbededMSWidget" class="container-fluid" style="height: 600px"></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/muse/servlet/MusePeer", // 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>