For this example we will take an existing jQuery plugin that supports JSON as a datasource and integrate our data by leveraging XMOD Pro's templates and feeds!
Take a look at the demo on this page: (link has been removed due to malware at the destination)
You should be able to incorporate this method into any plugin that supports JSON as a data-source, or if you're super-motivated, write your own plugin!
Step 1: Choose your Data
Create or select an existing table to use and populate it with data. You'll be able to select which fields are captured for the auto-suggest later, so just focus on the data you want to feed into the plugin. In this tutorial we're focusing on the auto-suggest, so if you're unsure of how to create a table and populate it with a form, please refer to the documentation or other articles.
Example Table:
- ProductID
- ProductName
- ProductImage
- ProductSummary
- ProductTags
Step 2: Create your Stored Procedure and Function to Retrieve Data
UPDATE: Starting with XMP 4.3 there's a new tag that you can use <xmod:JsonFeed> in your feed that replaces the typical use of the SQL function we're about to create. If you have XMP 4.3 or later, you can skip creating the function!
JSON can be a bit touchy, which is why we need to make sure that certain characters in our data doesn't break the JSON format. We'll create a Stored Procedure and a custom function that encodes our results.
Create your Function
USE [YourDatabaseName]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE FUNCTION [dbo].[fn_JSEncode]
(
@p1 nvarchar(1000)
)
RETURNS nvarchar(1000)
AS
BEGIN
-- Declare the return variable here
DECLARE @retVal nvarchar(1000)
-- Add the T-SQL statements to compute the return value here
SET @retVal = (SELECT REPLACE(REPLACE(REPLACE(@p1,CHAR(13),'\r'),CHAR(10),'\n'),'"','\"'))
-- Return the result of the function
RETURN @retVal
END
Create your Procedure
If you're using XMP 4.3 or later, you can skip attaching the function to your stored procedure.
USE [YourDatabaseName]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[MyAwesomeSearch]
AS
BEGIN
SET NOCOUNT ON;
SELECT
-- Attach your function to your fields
dbo.fn_JSEncode(ProductID) AS [ProductID]
,dbo.fn_JSEncode(ProductName) AS [ProductName]
,dbo.fn_JSEncode(ProductSummary) AS [ProductSummary]
,dbo.fn_JSEncode(ProductTags) AS [ProductTags]
,ltrim(rtrim(isnull([ProductImage], ''))) AS ProductImage
FROM [ProductTable]
END
Step 3: Create your Feed
- Navigate to your XMP Control Panel
- Click on Feeds
- Create a new feed
New to XMP 4.3: If you skipped creating the function and want to take advantage of the new <JsonFeed> tag, pay close attention to the comments below!
<!-- If you're using XMP 4.3 or later, use the new <xmod:JsonFeed>> tag -->
<xmod:JsonFeed>
<!-- If you're using an older version of XMP, use the following: -->
<xmod:Feed ContentType="application/json">
<!-- Retrieve your dataset with ListDataSource by executing your stored procedure -->
<ListDataSource CommandText="EXEC MyAwesomeSearch"/>
<!-- Use a bracket to open your JSON feed and place it in the <HeaderTemplate> -->
<HeaderTemplate> [ </HeaderTemplate>
<!-- Create your JSON elements within the <ItemTemplate> of your feed -->
<ItemTemplate>
{
"productname":"[[ProductName]]",
"productimage":"/pathtoyourimages/[[ImageFile]]",
"productsummary":"[[ProductSummary]]",
"productlink":"/pathtoyourproductpage/productdetail.aspx?ProductID=[[ProductID]],
"tags":"[[ProductName]],[[ProductSummary]],[[ProductTags]]"
<!-- For the "ProductTags" we can use any field that we want. In our table example we
created a [[ProductTags]] field. This is good for putting in specific keywords that you want for a particular product.
For example, you would create tags separated by commas in your form for that field. So... above, we're going to tell the script that we want to use the Product Name, Product Summary, and Product Tags to use in the search. This will make more sense in just a bit. -->
}
</ItemTemplate>
<!-- We use the <SeparatorTemplate> to place a comma between our items returned. -->
<SeparatorTemplate> , </SeparatorTemplate>
<!-- Close your JSON elements within the <FooterTemplate> -->
<FooterTemplate> ] </FooterTemplate>
<!-- If you used the new <xmod:JsonFeed> to open your feed, close with it. -->
</xmod:JsonFeed>
<!-- If you used the older version, close with it. -->
</xmod:Feed>
Step 4: Create your Search Box!
On to the fun part! You can actually create your search box directly in your skin, or you can use an XMP Template. You can even attempt to use an HTML Module, but they usually do evil things to your code unless you know how to change those settings.
There's nothing XMod Pro specific about the search function, so create whatever solution works best for your situation.
The documentation of this plugin instructs us to upload the appropriate script files to our server, and we need to link those in the <head></head>of our document.
<head>
<script src='/js/jsrender.min.js'></script>
<script src='/js/jautocomplete.min.js'></script>
</head>
Initiate your script!
Following the documentation, we initiate our script. If you're using a template you can save some typing by using the <jQueryReady> tag.
<script type="text/javascript">
// Make sure that you initiate the script when the document is ready.
$(document).ready(function(){
// We'll use an ajax call to execute our XMod Pro feed!
$.ajax( {
url: '/DesktopModules/XModPro/Feed.aspx',
type: 'POST',
dataType: 'json',
// If your data doesn't change often, consider caching the results for better performance.
cache: true,
data : {
"xfd" : "MyAwesomeSearch", // The name of your feed
"pid" : 0 // Your PortalID
},
// We'll assign a destination for our retrieved data in our success function.
success : function(data) {
$('#jautocomplete').jautocomplete({
dataSource: data
});
}
});
});
</script>
Lets drop in our search box!
For my usage, I wanted the search box within the skin. I have a top level menu and I added the search to one of the LI elements.
<!-- The plugin documentation states that we use data-filter-by='whatyouwanttofilterby' as our search. Remember in our feed how we created a "tags":"[[OurFields]]" ? Here's where we assign it. -->
<li class="search" id='jautocomplete' class='jautocomplete' data-template='#jautocompleteTemplate'
data-filter-by='tags' data-max='50' data-minchars='2'>
<input id="text_search" type='text' placeholder='Search for it!'/>
<!-- jAutocomplete jsrender TEMPLATE -->
<script id='jautocompleteTemplate' type='text/x-jsrender'>
<div class='jautocomplete-box'>
{{for data}}
<!-- Arrange your result however you want! -->
<div class='item'>
<div class='img'>
<img src='{{>productimage}}' alt='' title='' />
</div>
<div class='data'>
<p class='s_title'>{{>productname}}</p>
<p class='s_desc'>{{>productsummary}}</p>
<p class='s_tags'>{{>tags}}</p>
<p class='s_link'>><a href='{{>productlink}}' title=''>View Details</a></p>
</div>
</div>
{{/for}}
</div>
</script>
</li>
All done!
The only other thing to note here is I didn't include the CSS files that came with the plugin. I defined my own styles in my skin.css.
Give it a try!