How to build search component (similar to Skuid preview search) to view other records in same object?

  • 3
  • Question
  • Updated 3 years ago
  • Answered
I'm building a page to override our Accounts object (relabeled Households).

Our users will mainly be working from the account object because we work in the personal financial services industry, and households are often the client's family unit.

If someone calls, they will want to be able to easily switch between households. This could be a one-step process, but is often a multi-step process when using the "Salesforce Universal Search Bar". This is because they have to type in the name, click search, and then click on the name from a list.

When I go to preview my accounts page from the Skuid page builder, Skuid pops up an awesome screen which I have attached.

I would love to embed this search bar on my new Skuid accounts (Households) page, so that users can utilize this functionality.
Photo of Greg Huete

Greg Huete

  • 2,340 Points 2k badge 2x thumb
  • hopeful

Posted 5 years ago

  • 3
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Official Response
Greg,

Here's a custom Component that you can add to your page that should do what you're after. THis is what the finished product looks like:



Here's how to do it:

(1) Create a new JavaScript Resource of type "Inline (Component)", called "SwitchRecord", with the following content:




// **** begin SETTINGS ****

var object = 'Account';
var placeholderText = 'Enter an Account name...';
var fieldLabel = 'Switch Account';
var goToUrlPrefix = '/';

// **** end SETTINGS ****

var element = arguments[0].addClass('nx-editor'),
model = new skuid.model.Model();

model.fields = [];
model.initialize();

var row = model.createRow(),
field = new skuid.ui.Field(row,model,null,{
id: 'FakeLookup',
register: false,
mode: 'edit'
}),
metadata = field.metadata = {
accessible : true,
editable : true,
filterable : true,
displaytype : 'REFERENCE',
ref : object,
referenceTo : [{
objectName: object
}],
label: fieldLabel
};

element.append(
skuid.ui.createFieldSet([field])
);

field.element.removeClass('nx-modified');
field.element.find('input')
.css('background-color','white')
.attr('placeholder',placeholderText)
.on( "autocompleteselect", function( event, ui ) {
window.location = goToUrlPrefix + ui.item.Id;
});



(2) Add this component to the header of your page using the "Custom" component, ideally inside of the right panel of a Panel Set of type "Custom Width" with two Panels, with the left panel set to "60%" width, and the right panel set to "40%" width:



(3) Check it out!