Using the Custom Component for Custom Page Behaviors

This lesson shows how to execute custom behaviors or actions on a specific page using the Skuid JavaScript API and the Custom component.

If you want to reuse this custom behavior on multiple pages, the best practice is to create a new Skuid component for that task, rather than using custom JavaScript on the page and cutting and pasting it to each page that you'd like to use it on.  We talk about that process in more detail in the article Create a Skuid Component.

Step 1: (Assuming you've already created a page) click JavaScript and add a resource

Step 1: (Assuming you've already created a page) click JavaScript and add a resource
  1. Click Javascript
  2. Click Add.

Step 2: Set the resource to In-Line and name it.

  1. Select In-Line for the Resource Location property
  2. Give the resource a name (the name doesn't matter at this point)
  3. Click to open the resource editor.

Step 3: Add your JavaScript and close the editor.

Here's a quick JavaScript example taking fields from our model using the Skuid JavaScript API and creating create button that, when clicked, opens a new window showing a Google Map of a Contact's address (Note: you need a "Contacts" model on your page with all the Mailing Address fields referenced in this snippet for this it to work). Clear out the sample code in the editor, and paste in this snippet:

skuid.componentType.register('mapAddress',function(element){
    var btn = jQuery('<button>Map Address</button>').button()
		.on('click',function(){
			// instantiate a model using the model named "Contacts" 
			var m = skuid.model.getModel('Contacts');
			// get the first row (or record) from our model
			var row = m.getFirstRow();
			// assemble the mailing address fields
			var street = m.getFieldValue(row,'MailingStreet');
			var city = m.getFieldValue(row,'MailingCity');
			var state = m.getFieldValue(row,'MailingState');
			var zip = m.getFieldValue(row,'MailingPostalCode');
			var address = street + ' ' + city + ', ' + state + ' ' + zip; 
			window.open('http://maps.google.com/?q=' + address,'_blank','height=750,width=1100,status=0,menubar=0');
		});
	element.append(btn);
});

Step 4: Click the Components tab, then drag the Custom component onto your page

Step 4: Click the Components tab, then drag the Custom component onto your page
  1. Click the Components tab.
  2. Drag the Custom component onto your page
  3. Enter the name of the "registered component type" from your JavaScript (the first  parameter in the register method -- in this case, 'mapAddress')

Step 5: Click Save, then Preview.

Step 5: Click Save, then Preview.

 

Step 6: Click your new button and check out the map

  1. Click the Map Address button
  2. Check out your map.

If your map popup doesn't work, make sure that you have a model on your page with this address information and that you have inserted that model name into the code snippet, e.g.

 skuid.model.getModel('PutYourModelNameHere')

To ask questions about this and other use cases, report problems, or share ideas, head over to community.skuidify.com.