Overview
Most PDAs come with a little application that allows you to make a list of the jobs you need to do – the todo list. This is a handy substitute for the old pencil and back of an envelope standby and tends not to get lost, covered in coffee stains or chucked out by accident. However both pencil and paper, and the PDA equivalent suffer one disadvantage in the business environment in that they are not easily sharable. The corporate todo list allows a group of people working in a small business or department to see what needs to be done, who is doing it, and what progress has been made on the collection of tasks that represents the day to day workload of the group.
We are going to put together a corporate todo list in Webflow – which turns out to be quite a small job. Once the script is complete and has been deployed it will be available to all the users of the Webflow system via their web browsers. The todo script will record the description of the task (naturally), who originated the task, who has been assigned to do the task – if anyone, and a priority from 1 to 10.
There's one final point about todo lists of this kind. Since user of the system can add tasks and assign others to them it does in fact enable the greenest new hire to set up a task for the chairman of the board, and at first glance this is not ideal behavior. In fact, in most corporations there is no need to have the software police this kind of activity because social structures mean that it is hardly ever used frivolously. In most responsible environments if someone down the corporate totem pole assigns a task to somebody higher up, the higher up person really needs to know about the task. They can also either ignore or reassign it to someone more appropriate if they think that is necessary.
Outline
The script itself starts with a the basic outline of a Webflow script in :-
<?xml version="1.0"?> <!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd"> <ofscript version="1.0" id="" name=""> </ofscript>
What's with all those '>' and '<' ?
It's XML. If you don't recognize the format of the script example on the left, you need to read through the XML Tutorial section.
All Webflow scripts start with this basic structure.
Next we have to identify this script by setting the 'id' and 'name' attributes to something meaningful. The id attribute must be unique so we recommend a syntax using your domain name reversed plus the name of the script.
for example, the script is 'CorporateToDoList' and our domain is safedataco.com, reversing this and adding the script name to the end gives :-
com.safedataco.CorporateTodoList
Using the reverse domain convention means that even if your script id was accidentally copied by someone else, the complete name would probably still be unique.
The name attribute contains a description of this script. This will appear on the Webflow interface which the user will see.
For example :-
Corporate Todo List
so our script now looks like:-
<?xml version="1.0"?> <!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd"> <ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List"> </ofscript>
Changes to the xml files are highlighted from now on to make it easier to identify the changes made from section to section.
Save this as a text file with an xml extension. It does not matter what you call the filename, something like 'corporatetodolist.xml' would be a good choice in this case.
Mappings
Next we define the variables used to store the fields of todo information. You will recall that the application is going to keep track of four different kinds of information, the task description, the person responsible for doing the task, the priority of the task, and the person who set the task. We have to choose four meaningful names to represent these pieces of information. Because the actual information is going to vary from case to case, these four names are called variables. For example, we could pick:-
description personresponsible priority personassigning
Variables must not contain any spaces and it is recommended that they consist purely of lowercase letters, numbers and the underscore character. The variable names are placed into the 'mapping' section of the script.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
</ofscript>The 'svar' tag means a that the variable will contain a string (a line of text), there are alternative things that can be stored in mappings that we will come to later on in this manual.
So far we have decided what sort of things we are going to store in the application, and named them. The next step is to decide what we are going to do with the information we are storing. In fact there are any number of things we might want to do, show the items that an individual has to deal with, show the items that an individual has assigned, show the top ten most important items and so on. However, there is one thing that is absolutely basic, and that is adding an item to the system. Without this basic step no other activities would be possible.
Menus
In order to add items, to the system, the users will need a menu item that lets them do this. These menu items appear on the menu bar at the top left of the Webflow screen. Each menu has a title and a list of menu items. Each menu item has an description and an associated action.
We will add a menu called 'ToDo' with an item named "Add ToDo Item" which has an associated action called 'addtodo' (we will look at actions later on in this chapter).
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
</menu>
</menus>
</ofscript>
Actions
The main work of the script is contained in 'actions'. A useful script has at least one or more actions.
For our add to do menu item to work we need to define an action called 'addtodo'.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
</menu>
</menus>
<actions>
<action name="addtodo">
</action>
</actions>
</ofscript>When the user selects the 'Add ToDo Item', this action is called. Currently this action does not do anything as their are no items in between the 'action' tags.
Forms
For the 'addtodo' action we want to present a form to the user to enter the three pieces of information we are recording for a ToDo item. These were the person responsible, the priority and the description.
For this example, all three items are simple text entry boxes on the form. The script with the form elements looks like:-
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
</menu>
</menus>
<actions>
<action name="addtodo">
<clear variables="personresponsible, priority, description" />
<form title="Add a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
</action>
</actions>
</ofscript>We define a form with the title "Add a ToDo Item". This form contains three text input boxes. The name attribute on each input tag associates the input with a variable (the ones we defined earlier in the mappings stage), and a label. The label is displayed against the input box.
So far, the script will allow you to click a menu item called "Add ToDo Item" and fill in the form and click the OK button. It will not actually add anything to the database. This is done in the final step for this action, the 'add' tag.
Add
To actually add the three variables to the database as a new record, we simply use a 'add' tag after the form.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
</menu>
</menus>
<actions>
<action name="addtodo">
<clear variables="personresponsible, priority, description" />
<form title="Add a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<add>
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</add>
</action>
</actions>
</ofscript>With this script, the data is actually persisted to the database as a new record.
Now if you wish you can try installing this script into Webflow. If you have not done this before, read the "Installing scripts" section in the Installation guide. You should see a screen similar to the one below showing the ToDo menu item.
(Click each image to enlarge)
Clicking ToDo and selecting "Add ToDo Item" should produce a screen similar to the below.
(Click each image to enlarge)
Table and the default action
Now we want to display the todo list in a table on the 'front' Webflow screen. The front screen is a special action called 'default'. When other actions have completed, or you have just logged in, the system will call the 'default' action. Typically the default action contains primary information. In this scripts case it will be the list of todo items.
We start of by defining the default action.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
</menu>
</menus>
<actions>
<action name="addtodo">
<clear variables="personresponsible, priority, description" />
<form title="Add a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<add>
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</add>
</action>
<action name="default">
</action>
</actions>
</ofscript>Next we add a form and a table element.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
</menu>
</menus>
<actions>
<action name="addtodo">
<clear variables="personresponsible, priority, description" />
<form title="Add a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<add>
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</add>
</action>
<action name="default">
<form okbutton="false" cancelbutton="false">
<table name="todoitems">
<column name="Person Responsible" var="personresponsible" />
<column name="Priority" var="priority" />
<column name="Description" var="description" />
</table>
</form>
</action>
</actions>
</ofscript>First we did not specify a title to the form, it's a bit unnecessary for the default action even though you can specify one if you wish, then we specify that we don't want to see an OK and CANCEL button at the bottom of the screen as we are not committing data.
Inside the form we have a table tag. The table has a name (of which it's relevance will become transparent later), and contains a list of columns.
The columns each define the text which will appear on the heading, and the 'var' attribute specified which variable it is linked to (the ones we defined at the beginning in the mappings stage).
Now if you wish you can try installing this script into Webflow. If you have not done this before, read the "Installing scripts" section in the Installation guide. You should see a screen similar to the one below showing the table (this example has had one ToDo item added).
(Click the image to enlarge)
Edit
In order to change an item, we need to select it and call up a form to change the details. The details are then sent to the database if the user clicked the OK button.
We do two things in the following script. We create a new menu item for edit, and set an attribute on the table so items can be selected.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
<item name="Edit ToDo Item" action="edittodo" condition="{todoitems}!=null" />
</menu>
</menus>
<actions>
<action name="addtodo">
<clear variables="personresponsible, priority, description" />
<form title="Add a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<add>
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</add>
</action>
<action name="default">
<form okbutton="false" cancelbutton="false">
<table name="todoitems" selectable="true">
<column name="Person Responsible" var="personresponsible" />
<column name="Priority" var="priority" />
<column name="Description" var="description" />
</table>
</form>
</action>
</actions>
</ofscript>The 'selectable="true"' attribute allows single items on the table to be selected. The edit menu item calls a new action called 'edittodo', but has a condition attached to it. If the condition evaluated to true the menu item is enabled, if it is false, the menu item is 'greyed' out thus disabled. Here we test to see if the variable called 'todoitems' has the details of the item selected (the table sets its variable to 'null' if no item is selected). This means we can only use the edit feature if an item is selected.
Next we have the 'edittodo' action. The action is in three parts. The first part retrieves the data from the database for the form to use. The second part (the form) is virtually identical to the add form as we are changing the same data, and the third part updates the data in the database.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
<item name="Edit ToDo Item" action="edittodo" condition="{todoitems}!=null" />
</menu>
</menus>
<actions>
<action name="addtodo">
<clear variables="personresponsible, priority, description" />
<form title="Add a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<add>
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</add>
</action>
<action name="default">
<form okbutton="false" cancelbutton="false">
<table name="todoitems" selectable="true">
<column name="Person Responsible" var="personresponsible" />
<column name="Priority" var="priority" />
<column name="Description" var="description" />
</table>
</form>
</action>
<action name="edittodo">
<retrieve pk="{todoitems}">
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</retrieve>
<form title="Edit a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<change pk="{todoitems}">
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</change>
</action>
</actions>
</ofscript>For both the 'retrieve' and 'change' tags, an attribute called pk must be supplied telling the tag the selected item. This is simply the variable name of the table.
This completes the edit action.
Delete
The delete action is has a similar menu item to the edit action since you can only delete an item if it has been selected first.
<?xml version="1.0"?>
<!DOCTYPE ofscript SYSTEM "http://www.safedataco.com/dtd/webflow/ofscript.dtd">
<ofscript version="1.0" id="com.safedataco.CorporateTodoList" name="Corporate Todo List">
<mapping>
<svar name="personresponsible" />
<svar name="priority" />
<svar name="description" />
</mapping>
<menus>
<menu name="ToDo">
<item name="Add ToDo Item" action="addtodo" />
<item name="Edit ToDo Item" action="edittodo" condition="{todoitems}!=null" />
<item name="Delete ToDo Item" action="deletetodo" condition="{todoitems}!=null" />
</menu>
</menus>
<actions>
<action name="addtodo">
<clear variables="personresponsible, priority, description" />
<form title="Add a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<add>
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</add>
</action>
<action name="default">
<form okbutton="false" cancelbutton="false">
<table name="todoitems" selectable="true">
<column name="Person Responsible" var="personresponsible" />
<column name="Priority" var="priority" />
<column name="Description" var="description" />
</table>
</form>
</action>
<action name="edittodo">
<retrieve pk="{todoitems}">
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</retrieve>
<form title="Edit a ToDo Item">
<input name="personresponsible" label="Person Responsible" />
<input name="priority" label="Priority" />
<input name="description" label="Description" />
</form>
<change pk="{todoitems}">
<field name="personresponsible" />
<field name="priority" />
<field name="description" />
</change>
</action>
<action name="deletetodo">
<delete pk="{todoitems}" />
</action>
</actions>
</ofscript>The delete action simply contains one tag 'delete' which takes an pk attribute containing the selected item. The item is removed permantly from the database.
Conclusion
This completes the ToDo script. This is a very basic script which can be further enhanced to give a more rich feel. We can add a confirmation form to the delete action to prompt the user before deletion, and enable column sorting on the table etc etc. This script should demonstrate the fundamental parts to any Webflow script and the most common operations (add/view/edit and delete).
Now if you wish you can try installing this script into Webflow. If you have not done this before, read the "Installing scripts" section in the Installation guide. The screen below shows the completed script with the ToDo menu showing.
(Click the image to enlarge)
Download
You can download the complete script here.