Extension Templates

We add two tags that lets us define template in the django template.

First tag is “exttemplate” that lets you define individual extension templates. It’s a simple block tag that takes extension template name as a parameter and tag body is used as template contents. So it looks like:

{% exttemplate "Some template" %}
<action data="bar" application="foo" />
{% endexttemplate %}

Second tag deals with actual variable prompts.

{% prompt "Foo" %}

This gives you a text input field.

We can add an ability to specify default values, something like:

{% prompt "Foo" default "bar" %}

It also has a special form that displays a checkbox instead of a text entry:

{% prompt "Gateway" from gateways %}

We can also add simple data validation for the text input, something like:

{% prompt "Foo" as int %}

This would limit user’s entry to only integers. It could be also used for IPs, emails, etc. But this feature is optional and can be implemented later.

After prompt values are filled and submitted, they will be filling extension template variables based on prompt name. This happens in javascript, so we won’t be using Django template syntax here. We need to mark it in a different way, could be something like $$ promptname $$ or [[ promptname ]].

As a real world example, we can have something like:

{% exttemplate "Conference" %}
<action data="{{ account_name }}_{% prompt "Conference Name" %}" application="conference" />
{% endexttemplate %}

Now the interesting part – how to make it all work. I think that we should be using JavaScript code generation based on our extension templates description. The extension described above should give us an output like:

exttemplates.push(["Conference", "<action data="current_account_[[ Conference Name ]]" application="conference" />", ["Conference Name"]]);

I think that it’s OK to use a hard-coded variable name here.

When the page completes loading, a JS function should fill in extension templates selection values based on first element of each item in exttemplates.

When an extension is chosen, we show a pretty pop-up window with inputs generated based on last argument. It’s a JS Array object where each entry is either a string or another array. Arrays are used to specify that the entry should be a choice box (for user gateways, endpoints etc). It could be something like:

["Conference Name", ["Gateway", gateways], "Destination"]

It can also be extended to support custom validation, like [“Port”, int_validator_function, “Must be an integer”].

After user submits valid data, we replace all template variables with entered data in template’s second argument, so in

<action data="current_account_[[ Conference Name ]]" application="conference" />

we replace [[ Conference Name ]] with whatever user entered.

Another cool feature that can be added is undo/redo functionality. This can be implemented by simply storing all past values of actions XML field in a JS Array and moving back & forth on user’s requests. Of course it only works until form is saved.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License