Skip to content

Latest commit

 

History

History
123 lines (77 loc) · 4.34 KB

Cells.md

File metadata and controls

123 lines (77 loc) · 4.34 KB
Raw

Cells - Reactive Spreadsheet Cells

Smartdown uses ordinary Markdown link syntax to specify a cell label and body, where the label is specified in the link label, and the body is specified in the link's URL. For example, the following declares an output cell that displays the value of the FOO variable:

[The value of FOO is](:!FOO)

When a non-empty label is present, the cell will be formatted with its label on its own line. When no label is present, then the cell will be formatted inline.

Cells with labels get their own line

  • What is your name?
  • Glad to meet you
  • What is your name again?
  • Really glad to meet you
  • Are you human?
  • Humanity
  • What is your name? (wait for blur)

Cells with no labels are inlined

What is your name? So glad to meet you . What is your name again? Really glad to meet you . Are you human? Your Humanity is .

Cell output filters

The syntax:

[](:!MyExpr|markdown)

will result in the value in variable MyExpr being formatted as Smartdown and then rendered as the output of the cell.

For example, type Smartdown into the input cell below and see the resulting rendered Smartdown:

Type Markdown Here Rendered Markdown

Numeric data

By default, a cell is a string. An input cell may be annotated to indicate that the datatype is number and that conversions should occur upon input. The example below illustrates this by modifying and displaying the smartdown variables alpha and beta. This example also shows how the numeric range syntax can be used to create an input slider. This example also demonstrates various ways to label an input.

α β

α β

$\alpha$ α $\beta$ β

Navigation Links

  • Go to SVG Card with Text Label
  • Go to P5JS Card with Image
  • Go to Tweets with SVG Image

Calculations

Double Me

Double Name

Comparing inline vs form mode

  • What is your name?
  • Glad to meet you
  • What is your age?
  • Your Age

... What is your name? ... Your name is ... What is your age? ... Your Age is ...

Autocomplete Experiments

We can use existing Smartdown features such as cells and playables to build an autocomplete input field, which will enable a user to type into the field and will produce a list or menu of items which match the partial input. The user can optionally select an item from this list and it will replace the partial input.

For the examples below, we'll use the USASpending API. We'll start with the following endpoint, which returns a list (10 items, by default) of matches to a given partial string typed in by the user. For example, typing duc will produce a list of agencies that contain duc, including Consumer Product Safety Commission and Department of Education.

This is a work in progress. A future version of Smartdown will have a builtin autocomplete capability.

Cell and Playable

Account Name 

async function getMatches(partial) {
	const result = await smartdown.axios.post('https://api.usaspending.gov/api/v2/autocomplete/awarding_agency/', {
      'search_text': partial
	  });

	const formatted = result.data.results.map(d => {
		const uri = d.subtier_agency.name.replace(/ /g, '%20');
		const line = `- [${d.subtier_agency.name}](:=AccountSelected=decodeURIComponent("${uri}"))`;
		return line;
	});

	return formatted.join('\n');
}

this.dependOn.AccountName = async () => {
	const partial = env.AccountName;
	if (partial.length > 2) {
		const matches = await getMatches(partial);
		smartdown.set('AccountMatches', matches);
	}
};

Selected

Back to Home