Examples and Screenshots

The following examples are available to see and experiment with. Click on an image to see a detailed description and screenshot. Then click the filename to open the application in a browser. When the file opens in your browser, you can see exactly how it works by clicking on the buttons (S, P, f(), and E) in the upper right of each section. These examples currently work with Internet Explorer (6 and 7) and Mozilla.

pay (example on homepage)	todo list	flashcards
cell contents as array	many-to-many relationships	times table
mortgage calcs	histogram	school db
	dbpedia (RDF/SPARQL) query

Note that as these models open in a web browser, you cannot save any changes you make. If you would like to modify these examples and save them to your own computer, they are also available in the downloadable desktop application version of the Objectsheet.

pay.os   The example from the homepage

This example shows some of the basics of the Objectsheet:

• Formulaic flow: columns with entered and calculated values
• Adding units to a column name: after a column name, a comma or parentheses delineate units. Units have no meaning beyond simple notation. E.g., in the second column of table1, "rate" is the column name, ", $/hr" is the units
• Using HTML sections to summarize and report results (click "E" icon in the upper right of html1 to see html source)
• Formatting table results (click "P" icon in upper right of table1 to see format formulas).
• Using Scratch sections to inspect values within a model. Select a section using its name; the rows in a Table are kept in the us[] array.

todo.os   An example to-do list

This application includes the following features

• Automatic highlighting of high priority tasks (in green)
• Sorts tasks by priority
• Configurable task categories
• Shows or hides completed tasks

This application illustrates the following Objectsheet capabilities

• HTML Section and Table Section interaction. The following HTML is used within the "info" section (click the "E" button to see HTML source),
  • <input type='button' name='add' value='add' action='todo.pasteObjects([{start:new Date()}]).calc();'>
    is a button that when clicked, adds a new object (by default at the bottom row) with the "start" property set to the current date. The .calc() forces the table to be updated.
  • <input type=checkbox name='showDone' action='todo.calc()'>
    is the "Show Completed" checkbox in the info Section. It simply sets the info.showDone variable (1=checked, 0=unchecked). The filter formula in the "todo" table, "info.showDone ? 1:complete==0", reads that variable and filters accordingly: "1" means show all rows, "complete==0" means show only rows where "complete" is unchecked, or zero.
  • <input name='topics' size='50' action='todo.updateDisplay("topic")'>
    This is where the topic names can be modified. Non-text containers in Tables (select boxes, radio buttons, labeled checkboxes, etc.) must be updated manually, using updateDisplay().
• Using the "display" attribute to create drop down select box ("topic" column) and checkbox ("completed" column). Click the "P" button to view the display row.
• Automatic updating of select boxes in "topic" column when data source ("Topics:" textbox) is modified.
• Control of filtering logic ("Show Completed" checkbox).

Click on the buttons on the upper right of each section to see what's inside.

times.os   Resizeable times table

• Automatic sizing of table ("misc" row)

multi.os   Basic usage of the multi-item select box and arrays as cell contents.

• Use of the multi() display function (ice cream toppings). The names of the toppings are the keys in the "toppingCost" object, defined in the "misc" row of table1 (click the "S" button to see it).
• Applying analytical functions to cells that contain arrays (total cost of the toppings). The cost of each topping are the values of toppingCost (see "misc" row of the table1 template.)

many-many.os   Many-to-many data representation using arrays as cell contents. See the html1 section in this file for more details.

• Basing multi() selectable elements on another table's contents (Component.name()).
• Determining the reverse mapping (ie., which products contain a given component?). See the "Products" formula within the "Component" table: Product.us.grep("components.contains('"+cname+"')").collect("pname")
• Display function in the "name" column of the Component table ensures that the multi select box is updated whenever a Component's name is added or modified.

finance.os   Mortgage and Amortization tables

This Objectsheet allows you to evaluate a range of factors in calculating mortgage payments. It also demonstrates the "stacked", and "canClose" options and row filtering.

• The stacked option is one way of cleaning up the presentation of sections, by showing them one above the other and allowing no overlap. The vertical sequence also defines the order of calculation, top-to-bottom.
• The Can Close option is turned off. This prevents the individual sections from being accidentally removed (there is no close box visible on the sections below). To remove a section, first check the Can Close checkbox in the Options menu.
• One way to make large tables (e.g., the amort table, with over 100 rows) display more quickly is using the bare() display function. The bare() display function renders them faster than the default editable cell. bare() is also useful when you want to ensure the user does not modify values.
• Another way to make long tables (like the amortization table below) display quicker is by filtering rows. Instead of always showing every month, you can see a summary version. The 'filter amortization every' parameter controls the amort table's "filter" row. The row label becomes "a\b", where a is the original row number and b the row number as shown. This also makes the table more compact and therefore easier to follow.
• To allow a column to represent both a single and a range of values, this file defines a short valRange() function. This function is in the section named "scratch1". To view it, go to the Sections menu and check the "visible" checkbox next to scratch1. The valRange() function looks for two numbers separated by a dash, then creates the appropriate Objectsheet range() function. This function is called in the "info" section when you change one of the Amount/rate/years text boxes. Within the "info" section, click the "E" button at the top-right corner; note the "action" parameter in the html code.

flashcards.os   A simple learning application. This example shows:

• Interaction between HTML Section buttons, fields, and Table Sections
• Hiding of the data; only application interface is shown. Check the "visible" boxes in the Sections menu to see the "terms" (data) and "QAs" (helper functions) sections.
• Use of Array.subtract() method to ensure questions don't repeat too quickly (see this.get() function in the QAs section)

histogram.os Demonstrates the histogram() array method.   Also shows:

• Use of radio() display function. The "gender" column in the students table uses a display function to generate the radio buttons. This causes the actual values in each row to be either "m" or "f".
• In the students table, the format function for the "ht, in" column converts height in inches to ft and inches.

The histogram() array method counts occurences of either single values or numeric ranges. There are three different calling conventions. Each convention is illustrated in the screenshot below.

1. Without an argument, the method returns all unique values and the number of times each value occurs in the array (see "gender2" table).
2. A single argument is a single bin (literal value or numeric range, "a-b", enclosed in quotes) and returns the number of times that bin occurs in the array (see "gender bins" table).
3. Multiple bins can be passed as an array; single values and numeric ranges can be mixed. The method returns the number of values within each bin (see "height bins" table).

In cases 1 and 3, histogram() returns an set of key-value pairs (ie., a Javascript object) with each key corresponding to each bin and the number of occurences as the value. In case 2, the number of occurences of the single bin is returned.

To illustrate the "height bins" calculation in more detail, the misc formula in that table analyzes the "height, cm" column of the "students" table. The column function (students.height(); the ", cm" suffix is ignored) returns the column's values as an array:

[184, 144, 177, 149, 174, 155, 182, 169, 190, 176, 167, 202, 180, 201, 190]

The argument to histogram() is the array of values down the "a" column (previously typed in by hand):

height_bins.a() = ["100-149", "150-174", "175-199", "200-300","", 190]

{"100-149":2, "150-174":4, "175-199":7, "200-300":2, "":0, 190:2}.

In the "height bins" table, the histogram counts are generated once and stored in convenience variable "h". In the instance area, the values are selected from "h" for each bin.

In the "gender bins" table, histogram() is called using the gender() column function, with a single value ("m", then "f"). histogram() returns just the number of values equal to the argument.

Finally, in the "gender2" table, histogram() is called without argument for the gender() array. It returns all values and corresponding counts as an object.

school.os   A small database of students, the schools in a university, and professors. This example shows:

• Use of select() display elements based on the rows of another table. For instance, the display cell of the "school" column in both the "profs" and "students" tables, is select(schools.abbrev()) (click "P" icon on the table to see). This creates a drop-down select box formed by the values down the "abbrev" column of the "schools" table.
• Synchronizing table rows: The "counts" table forces its length to be the same as the length of the schools table. This is done using a misc row expression: us.length = schools.us.length (click "S" icon on the table to see). The values in the "school" column of that table also tracks the "abbrev" column of the "schools" table via schools.abbrev(row) (see "counts" table formula row). Note: we could have gotten the same values using row references: schools.us[row].abbrev.
• Analysis of the data (in the "counts" table). This table uses the histogram function (see above example) to determine the number of students belonging to each school. The number of rows in this table is also controlled by the "misc" formula us.length=schools.us.length.
• You can find Eustice Eubanks' professor using the .find() method of Array: profs.us.find("school==students.us[4].school").name. Create a Scratch section then copy that expression into it.

sparql_query1.os   Query the DBpedia database

DBpedia is "a community effort to extract structured information from Wikipedia and to make this information available on the Web." DBpedia provides this information in the form of a database on the Internet that you can query using the RDF query language SPARQL. This model allows you to query DBpedia and then manipulate or analyze the results. Instructions are in the README section.

This file demonstrates the following Objectsheet capabilities:

• Defining helper functions in a scratch section (the "sparql class" section; to view, go to the Sections Menu and click the "visible" checkbox next to sparql_class)
• Using File.loadURL() to retrieve data from the web (this is defined in the sparql.prototype.send method within the "sparql class" section).* This sparql service allows you to retrieve query results directly in the JSON data format.
• Turn query results into a displayable result. Within sparql_query1.os, the sparql.prototype.getResults method filtered for the english language, then turns the sparql query results data structure into a simple array of objects (using the collect() function/method). The sparql.prototype.toTable method then creates the Objectsheet table and inserts the appropriate formatting for dates, and loading the values into the table using the setObjectCount() and pasteObjects() methods.
• Analysis of queried results. The "Add Lifetimes col..." button creates a new column comprised of the age of the entry, based on "birth" and "death". The code to do this is:

  results.addProperty("lifetime",-1, {formula:"toDays(death-birth)/365.25", style:"text-align:right",format:"fix(self,1)"}).calc(1);

  A property with name "lifetime" is added as the rightmost column of the table (index = -1), with the given formula. Additional analysis is shown in the "Calculations" table.

* Note: This file uses cross-site XMLHttpRequests to retrieve query results. If clicking Run Query returns a permissions error, try the following:

• Mozilla: In the browser URL bar, type "about:config", hit return, filter for term "codebase", double click on "signed.applets.codebase_principal_support" to set it to true.
• Internet Explorer (6): Tools Menu > Options > Security > Miscellaneous > Custom Level > set "Access data Sources across domains" to Prompt or True.
• (Security access has not yet been resolved for Safari browser).