Table of Contents

Completed Model 

Download: SiteSelector.zip

Video

Example: 

Model Tags

mySelector - this is an arbitrary tag that determine's what component the program shoudl be running on. 

Example Program Code

Example 1

This is a generic example. In the code below you can manually input your selector options and set their values.

daySelect = query('mySelector').view;

selectOption = [{text:"Item 1",value:"foo1"},
				{text:"Item 2",value:"foo1"},
				{text:"Item 3",value:"foo1"},
				{text:"Item 4",value:"foo1"},
				{text:"Item 5",value:"foo1"},
				{text:"Item 6",value:"foo1"},
				{text:"Item 7",value:"foo1"},]

// daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');

selectOption.forEach(function(item){
	daySelect.options[daySelect.options.length] = new Option(item.text, item.value);
});

Example 2

In this example, the selector query's all of the sites in the project and then brings up the selected site's magic bubbles every time one of them is selected.

You can change the query to be whatever you choose by replacing the readAll(Sites) inside of the finstack.eval seen in the code below:

In this scenario you will need to run the program on a unique tag on the selector component. You may also want to create a variable that will run on "world" and trigger on the customer event "start" so it loads upon startup. 

daySelect = this.view;
myEvent = context.event;

if (myEvent.type === "start"){
	var promise = finstack.eval("readAll(site)");
	promise.then(function(event)
	{
		var sites = event.result.toObj();
		sites.forEach(function(item){
		daySelect.options[daySelect.options.length] = new Option(item.dis, item.id);
	});
	}.bind(this));
}

console.log(context.event.type);
top.app.ShowRelatedBubbles(context.event.target.value, context.event.target.value, ("finModel" in this),context.event)

How To Make your Own

1. Drag out a "selector" component from you Components list
2. Add a unique tag to your selector component. This tag is arbitrary. In our example above we use "mySelector"
3. Create a new program that runs on the unique tag from step 2 ("mySelector")