Skip to main content

Integrate search with your Salesforce case submission (MT4)

Written by Miller Saltzman
Documentation Editor, Customer Success at MindTouch

Unsupported! Content on this page is not supported by MindTouch. Please search our Success Center for supported content.

Learn how to integrate MindTouch Search into a case submission form within Salesforce Portal or Salesforce Communities. This integration helps sync the experience between your MindTouch documentation and your Salesforce ticketing system, while also suggesting documentation for deflection purposes. This article is most relevant for support agents, site owners and developers.

How the Integration Works

When your customers are logged into your Salesforce Community/Portal, they can click on the custom Create New Case tab which will allow them to submit a new case to your Support team:


As a users starts to type in the Subject field, search results from your MindTouch site will be displayed on the right-hand side:

search results.png

From there, users can drill down into the search results by clicking on the faceted category option at the top of the search results:


The faceted categories shown here will mirror your main site categories. This is a similar experience to using Search directly within MindTouch (see below), just re-styled for your Salesforce Community/Portal:

After submitting the new case, the user will be redirected to the newly created case in your Salesforce Community/Portal.


  • For a streamlined end-user experience, you may want to consider using CSS to hide the default New button in Cases. This will ensure that users can only create new cases using the custom Create New Case form.
  • For your customer to use the Create New Case tab, they will need Create rights on the Salesforce Cases object.
  • When choosing the facet options in the search results, the form does not re-search based on facets. In this case, the results are simply filtered based on the facets.
  • Both the Apex Class and Visualforce Page were last tested against Salesforce API version 29.0.
  • While this form is not officially supported, we hope you enjoy using it within Salesforce for your customers!

Installing the Create New Case form in Salesforce

Installing the Create New Case form in Salesforce includes two components:

Installing this custom form will require the following:

  • Salesforce administrator access
  • Previous experience with customizing Salesforce
  • Approximately 1 hour of setup and testing
  • Production and Development Salesforce environments

While Visualforce pages can be added directly to production Salesforce environments, custom Apex Classes can only be added into development Salesforce environments, and then deployed into production. For details on deploying custom classes from a development Salesforce environment, see Salesforce's documentation here.

Custom Apex Class

To add the custom Apex Class, log into your development Salesforce environment as an administrator. Then navigate to Setup:

From there, click on Develop > Apex Classes from the left-hand menu:

Then click New to create a new custom Apex Class:

  1. Set the title for the Apex Class to SubmitCaseController.
  2. Copy the code below into the text area:
public class SubmitCaseController {
    public Case c { get; set; }            
    public SubmitCaseController() {
        AssignmentRule AR = new AssignmentRule();
        AR = [select id from AssignmentRule where SobjectType = 'Case' and Active = true limit 1];
        Database.DMLOptions dmlOpts = new Database.DMLOptions();
        c = new Case();
    public List<SelectOption> getBrowserValues {
        get {
            List<SelectOption> options = getFieldValues(c, 'Browser__c');
            return options;
        } set;
    public static list<SelectOption> getFieldValues(SObject obj, String fld) {
        List<SelectOption> options = new List<SelectOption>();
        map<String, Schema.SObjectField>fieldMap = obj.getSObjectType().getDescribe().fields.getMap();   
        list<Schema.PicklistEntry> values =
        options.add(new SelectOption('', '--None--')); 
        for (Schema.PicklistEntry a : values) { 
            options.add(new SelectOption(a.getLabel(), a.getValue())); 
        return options;
    public PageReference submitCase() {        
        try {
            c.Origin = 'Communities';
            INSERT c;
            PageReference casePage = new ApexPages.StandardController(c).view();
            return casePage;
        } catch (Exception e) {
            return null;
  1. In the code above, update the Salesforce API field name in line 14 to the corresponding drop-down you'd like users to select within the form. Our example is below:
  1. Click on the "Version Settings" tab, and choose 29.0 from the drop-down menu.

apexclass api ver.png

  1. Click save.
  2. Next create the Visualforce page.

Custom Visualforce Page

Back in the Salesforce App Setup menu, click on Develop > Pages from the left-hand menu:

  1. Set the title for the Visualforce Page to New Case.
  2. Copy the code below into the text area:
<apex:page controller="SubmitCaseController" id="TEST">
<head xmlns="">
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Settings
        MindTouch = {
            URL: "",
            WIDGET_NAME: "Communities",
        GeniusLink = {}; = function(query) {
            // cleanup and escape special characters
            var query = $.trim(query).replace(/[[\]'":+\-&|!(){}\[\]^~*?]/g, "\\$&");
            var constraint = "+namespace:main AND +type:wiki";
            var $results = $('.mt-search-results');
            var $categories = $('<div></div>').addClass('mt-search-categories');
            if (!$results || $results.length == 0) {
            else {
            if (!query) {
                $results.text('Please enter a search');
            // prepare API request. Note: dream.out.pre is =? so it's a JSONP request
            var url = MindTouch.URL + '/@api/deki/site/query?dream.out.format=jsonp&dream.out.pre=?';
            var params = {
                q: query,
                limit: 10,
                sortby: "-date,-rank",
                constraint: constraint,
                format: "search",
                origin: MindTouch.WIDGET_NAME
                url: url,
                data: params,
                dataType: 'jsonp',
                success: function(data) {
                    if (! || ! {
                        $results.text('No results found');
                    var results = instanceof Array ? : [];
                    var categories = {};
                    // build "All Categories" button
                    var $all = $('<span>All</span>').addClass('active').click(function(){
                        $('.mt-search-categories span').removeClass('active');
                        $('.mt-search-results li').show();
                    // populate search results and categories
                    $.each(results, function(i, result) {
                        var $link = $('<a target="_blank"></a>').attr('href', result["uri"]).text(result.title);
                        var $overview = $('<div class="overview">').text(result["content"]);
                        $ {
                        var $li = $('<li></li>').append($link, $overview);
                        // build category filter - make URL paths reader-friendly
                        var category = $.trim('/')[0].replace(/^[a-z0-9]+_/, '').replace(/_/g, ' '));
                        category = category || "Home";
                        if (typeof(categories[category]) == "undefined"){    
                            categories[category] = [];
                            var $span = $('<span>' + category + '</span>').click(function(){
                                // hide other results, show this one
                                $('.mt-search-categories span').removeClass('active');
                                $('.mt-search-results li').hide();
        var timer = null;
        searchKeyPress = function(elm) {
            var query = $(elm).val();
            // function needs to compute the filter to use...
            timer = setTimeout(function(){;}, 1000);
/*** search-results.css ***/
body {
    background: #fff;
    color: #333;
    font: 12px/1.5 Arial, Helvetica, sans-serif;
    height: auto;
.mt-case-search-results a {
    color: #30b3f6;
    text-decoration: none;
.mt-case-search-results a:hover {
    color: #30b3f6;
    text-decoration: underline;
.htmlAreaComponentModule {
/* containers */
.half {
    width: 50%;
    float: left;
.mt-contact-support-form {
    margin: 2em;
    overflow: hidden;
.mt-case-search-results {
    margin: 0 0 0 1.25em;
    padding: 0 .25em;
    width: 45%;
/* search results */
.mt-case-search-results-header {
    font-size: 1.3em;
.mt-case-search-results ul {
    list-style: none;
    margin: 1em 0 0;
    max-height: 400px;
    overflow: auto;
    padding: 0;
.mt-case-search-results li {
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    margin: 0 .5em 1em 0;
    padding: .8em 1em;
    word-wrap: break-word;
.mt-case-search-results li:hover {
    border: 1px solid #30b3f6;
    box-shadow: 0 0 3px rgba(48,179,246,.25);
.mt-case-search-results .mt-search-empty {
    border: 0;
    color: #999;
    font-size: 1.2em;
    font-style: italic;
    margin: 0;
    padding: .8em 0;
.mt-case-search-results .mt-search-empty:hover {
    border: 0;
    box-shadow: none;
.mt-search-title {
    display: block;
    font-weight: bold;
    word-wrap: break-word;
.mt-search-result {
    display: block;
    word-wrap: break-word;
/* buttons */
body button, 
body .x-btn, 
body .btn {
    background: #ebebeb;
    border: 1px solid #bbb;
    border-color: #bbb #aaa #aaa #bbb;
    border-radius: 3px;
    box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
    box-sizing: content-box;
    color: #333;
    cursor: pointer;
    display: inline-block;
    float: right;
    font: bold 12px/2em Arial, Helvetica, sans-serif;
    margin: 0;
    outline: none;
    padding: 0 .8em;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    transition: all .1s linear;
button:focus {
    background: #bbb;
    border: 1px solid #30b3f6;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 0 4px rgba(0,174,255,.5);
    color: #333;
.x-btn:active {
    background: #bbb;
    border-color: #1d89bc #62b4da #62b4da #1d89bc;
    box-shadow: inset 2px 1px 4px rgba(0,0,0,.3);
    color: #333;
/* forms */
#new-case-additional {
    min-width: 340px;
    table-layout: fixed;
#new-case-description th,
#new-case-additional th {
    padding-right: 0;
    width: 130px;
#new-case-description label,
#new-case-additional label {
    color: #333;
    font-size: 1.2em;
    line-height: 1.8em;
    width: 130px;
#new-case-description label:after,
#new-case-additional label:after {
    content: ':';
    padding-right: 10px;
#new-case-description td,
#new-case-additional td {
    padding-left: 0;
    width: 200px;
#new-case-description input,
#new-case-description textarea {
    border: 1px solid #bbb;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    margin: 3px 0 0;
    outline: none;
    padding: 1px 3px;
    width: 195px;
#new-case-description input {
    height: 15px;
#new-case-description textarea {
    width: 300px;
#new-case-additional select {
    border: 1px solid #bbb;
    font-size: 1em;
    padding: 1px;
    width: 210px;
#new-case-description input:focus, 
#new-case-description textarea:focus {
    border: 1px solid #999;
    box-shadow: 0 2px 3px #ddd;
.pbBottomButtons .pbTitle,
.bPageBlock .pbTitle {
    width: 200px;
.pbButton .btn,
.pbBottomButtons .pbButtonb .btn {
    line-height: 2em;
    padding: 0 .8em;
.mt-search-categories span {
    padding: 2px 5px;
    margin: 0 .5em .5em 0;
    border: 1px solid #ccc;
    display: inline-block;
.mt-search-categories {
    background: #009900;
    color: #fff;
    <apex:sectionHeader title="New Case" />
    <apex:form >
        <apex:pageBlock title="New Case" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton value="Submit" action="{!submitCase}"/>
            <apex:pageBlockSection title="Case Description" columns="1">
                <table id="new-case-description">
                        <td><apex:inputText onkeyup="searchKeyPress(this)" required="true" value="{!c.Subject}"/></td>
                        <td><apex:inputTextArea required="true" cols="65" rows="10" value="{!c.Description}"/></td>
            <apex:pageBlockSection title="Additional Information" columns="1">
                <table id="new-case-additional">
                            <apex:selectList size="1" value="{!c.Browser__c}">
                                <apex:selectOptions value="{!getBrowserValues}"></apex:selectOptions>
    <div class="mt-case-search-results half">
        <h1 class="mt-case-search-results-header">MindTouch Search Results</h1>
        <div class="mt-search-results">
            <ul id="case-search-results">
                <li class="mt-search-empty">Start typing in the subject field for search results</li>
  1. Update the URL in line 8 to reflect your MindTouch site hostname.
    • This must include HTTPS. For more information about configuring an SSL for your MindTouch site, see our SSL documentation.
  2. Click on the "Version Settings" tab, and choose 29.0 from the drop-down menu. 

apexclass api ver.png

  1. Click save.
  2. Navigate to Customize > Cases > Fields:

  1. Click on the default Origin field.
  2. Add a new list option as Communities.
    • This will ensure that all new cases created with the Create New Case form are identified as a "Communities" origin for reporting purposes.
  3. Save the field changes.
  4. Next, add the Create New Case form as a tab in your Salesforce Community/Portal.

Configuring the Create New Case form in a Salesforce Community

For our example, we'll run through how to add the Create New Case form into Salesforce Communities. For details on customizing tabs within a Salesforce Portal, see their documentation here.

Back in the Salesforce administrator Setup menu, click on Create > Tabs from the left-hand menu:

Navigate to Visualforce Tabs and click New.


Configure your tab as needed. Be sure to select your New Case Visualforce page from the first drop-down list:

new tab setup.png

In our case, we added the Tab Label as Create New Case.

  1. Add the necessary visibility for the tab in.
  2. Again in the left-hand Setup menu, choose Customize > Communities > Manage Communities:
  3. Click Edit next to the Community you would like to add the tab into:
  4. Click Tabs & Pages:
  5. Choose the Create New Case tab from the Available Tabs and move it into the Selected Tabs:
  6. Click Save.