Using the Custom Component for Custom Page Behaviors

This lesson shows how to execute custom behaviors or actions using the Skuid Javascript API and the Custom component. This shouldn't be confused with creating a custom Skuid component. There's a little more to that and we talk about that in detail in another article. This tutorial illustrates using custom Javascript to meet a use case for actions on a specific page. 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.

Step 1: (Assuming you've already created a page) click the Resources tab, click Javascript, add a Javascript resource

Step 1: (Assuming you've already created a page) click the Resources tab, click Javascript,  add a Javascript resource
  1. Click Resources
  2. Click Javascript
  3. Click the Add Javascript Resource button

Step 2: Set the Resource Location property to "In-Line," give it any name

Step 2: Set the Resource Location property to "In-Line," give it any name
  1. Select "In-Line" for the Resource Location property
  2. Give the resource a name (this name doesn't matter at this point)

Step 3: Click the script button to open the script editor

Step 3: Click the script button to open the script editor

 

Step 4: Add your javascript, close the editor

Step 4: Add your javascript, 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:

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 5: Click the Components tab, then drag the Custom component onto your page

Step 5: 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

Step 6: Enter the name of the "registered component type" from your Javascript (the first parameter in the register method -- in this case, 'mapAddress')

Step 6: Enter the name of the &quot;registered component type&quot; from your Javascript (the first  parameter in the register method -- in this case, 'mapAddress')

 

Step 7: Preview the page

Step 7: Preview the page

 

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

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

Comments (0)

Add your comment

E-Mail me when someone replies to this comment