Blank Page Template

From KickApps Documentation

Jump to: navigation, search
With the advent of Custom Pages, this is effectively not necessary, but the page remains for reference as related to the page Custom Page Loaded.

We now provide a blank page template that contains only the header and footer of your KickApps hosted community. Combined with the JavaScript Events API, and some custom coding in your Global Page Template, you can create an unlimited number of "custom pages" hosted by KickApps.

You can use this template to pull in and display content from another site via Iframe, use the KickApps RSS Reference to create and display custom feeds, or create an Ajax powered interface to do anything you want.

Contents

Getting started

To use this template, simply point your browser at:

http://affiliate.kickapps.com/service/openCustomPage.kickAction?as=XXXX

You should replace XXXX with your Affiliate Site ID, and if your site is DNS masked, you should replace "affiliate.kickapps.com" with your custom domain.

You'll notice that the above URL loads a standard looking KickApps hosted page, but lacks any meaningful content besides the header and footer.

Populating the blank page template

To populate this page, we're going to modify the <head> section of your Global Page Template in the Affiliate Center. Since you might want to use this page more than once to display different custom views, we have wired up some special events using our JavaScript Events API.

The documentation for this event can be found at custom-page-loaded documentation. We'll be using this event to create custom views within our template.

This event works by parsing the URL of your page and pulling out any parameters. It then passes these parameters to your callback function, where you can do whatever you want with them.

There are only 3 reserved URL parameters:

bodyClass
If specified, the body will have the specified class applied to it. This helps you to target specific custom pages within your style sheets.
title
All blank page templates are untitled by default. You can use this parameter to automatically set a title for your page.
tabId
Specifies the corresponding element ID of the tab that you want to be selected upon page load.

If you specify any of these parameters, we will automatically apply their values. You wont have to do anything.

More on URL parameters

As stated in the custom-page-loaded documentation, any URL parameters present in the URL will be parsed and passed to the event callback function. This means that you can use virtually any valid URL parameter and it will be present in the callback function, where you can do with it whatever you want.

For example, any of the following URLs are valid:

openCustomPage.kickAction?as=XXXX
Your callback function will contain (1) parameter: as
openCustomPage.kickAction?as=XXXX&name=Bryan
Your callback function will contain (2) parameters: as, name
openCustomPage.kickAction?as=XXXX&id=1234&title=The%20Title%20is%20Here
Your callback function will contain (3) parameters: as, id, title
openCustomPage.kickAction?as=XXXX&someParam=books&sortedBy=alpha
Your callback function will contain (3) parameters: as, someParam, sortedBy
openCustomPage.kickAction?as=XXXX&category=animals&bodyClass=animals&title=All%20About%20Animals
Your callback function will contain (4) parameters: as, category, bodyClass, title

Creating more than one page experience

As you see from above, you can choose any number of arbitrary key \ value pairs in your URL, which will be passed to you via the custom-page-loaded event.

You can set up your JavaScript to recognize certain parameters and display specific page experiences based on these parameters.

For example, you may specify an pageId parameter that instructs your JavaScript to display a specific experience based on the specified ID.

Examples

Below are a couple of basic examples of how you can use the blank page template and associated JavaScript events to create a powerful and customized experience.

Example 1

The following example applies to a custom page with the following URL:

http://affiliate.kickapps.com/service/openCustomPage.kickAction?as=1234&myParam=google&bodyClass=googlePage&title=Do%20a%20Google%20Search

In this example, we will choose to display a search engine in an iframe depending on the value of myParam parameter in the URL. If the value is "google" the iframe will contain www.google.com, if the value is "bing" the iframe will contain www.bing.com.

Paste this code into the <head> section of your Global Page Template in the Affiliate Center.

function onCustomPageLoaded(data) {
    switch(data.myParam) {
        case "google":
            // show the google iframe
	    $j("<iframe />")
	        .attr("src", "http://www.google.com")
	        .appendTo("#ka_customPage");
	    break;
	case "bing":
	    // show the bing iframe
	    $j("<iframe />")
	        .attr("src", "http://www.bing.com")
	        .appendTo("#ka_customPage");
	    break;
	default:
	    $j("#ka_customPage").html("Oops, this is not a valid page!");
    }
}
var newEventId = Ka.events.listen('custom-page-loaded', onCustomPageLoaded);

Example 2

The following example applies to a custom page with the following URL:

http://affiliate.kickapps.com/service/openCustomPage.kickAction?as=1234&username=Bryan&action=sayHi&tabId=ka_photoTab
http://affiliate.kickapps.com/service/openCustomPage.kickAction?as=1234&username=Bryan&action=sayBye&tabId=ka_audioTab
http://affiliate.kickapps.com/service/openCustomPage.kickAction?as=1234&username=Bryan&action=scare&tabId=ka_blogTab

In this example, we will get the username parameter and perform an action on it, as specified by action.


Paste this code into the <head> section of your Global Page Template in the Affiliate Center.

function onCustomPageLoaded(data) {
    switch (data.action) {
        case "sayHi":
            alert("Hello, " + data.username);
            break;
        case "sayBye":
            alert("Goodbye, " + data.username);
            break;
        case "scare":
            alert("BOO!!! " + data.username);
            break;
        default:

    }
}
var newEventId = Ka.events.listen('custom-page-loaded', onCustomPageLoaded);

Example 3

In this example, we will combine the two examples above to show how you can display two different page experiences, depending on a parameter.

The following URL will instruct the custom page template to pop up an alert:

http://affiliate.kickapps.com/service/openCustomPage.kickAction?as=1234&experience=alert&username=Bryan&action=scare

The following URL will instruct the custom page template to display an IFrame:

http://affiliate.kickapps.com/service/openCustomPage.kickAction?as=1234&experience=iframe&myParam=google

Here is the code that decides which page experience to display to the user:


Paste this code into the <head> section of your Global Page Template in the Affiliate Center.

function handleIframeExperience(data) {
	switch(data.myParam) {
		case "google":
			// show the google iframe
			$j("<iframe />")
				.attr("src", "http://www.google.com")
				.appendTo("#ka_customPage");
			break;
		case "bing":
			// show the bing iframe
			$j("<iframe />")
				.attr("src", "http://www.bing.com")
				.appendTo("#ka_customPage");
			break;
		default:
			$j("#ka_customPage").html("Oops, this is not a valid page!");
	}
}

function handleAlertExperience(data) {
	switch (data.action) {
		case "sayHi":
			alert("Hello, " + data.username);
			break;
		case "sayBye":
			alert("Goodbye, " + data.username);
			break;
		case "scare":
			alert("BOO!!! " + data.username);
			break;
		default:
	}
}

function chooseCustomPageExperience(data) {
	if (data.experience == "iframe") {
		handleIframeExperience(data);
	} else if (data.experience == "alert") {
		handleAlertExperience(data);
	} else {
		alert ("Oh no, we dont know what you want to see!");
	}
}

var newEventId = Ka.events.listen('custom-page-loaded', chooseCustomPageExperience);