Applications Next 


Application: _software that employs the capabilities of a computer to perform a task that the user wishes to perform._

  • Aid organization, search, and retrieval of content

  • Automate workflow

  • Impose consistent Look & Feel across a set of topics

  • Increase efficiency

  • Reduce learning curve

  • Can be created by people with moderate computing skill sets (e.g. non-programmers)

If you need to create a lot of pages with the same look and feel -- the same structure -- consider building a Wiki application.

FirstPreviousNextLastExit  Slide 1 of 35 COPYRIGHT © 2020 by the contributing authors
  Wiki Applications - Possibilities Next 


  • Multi-function Calendar / Planner
  • FAQ
  • Discussion forum
  • Ticket tracking
  • Team directory
  • Meeting minutes
  • Project tracking system
  • Bug database
  • Document repository
  • Troubleshooting (runbooks)
  • Blogging
  • Inventory system
  • Music collection
  • Employee automobile database
  • Telephone call log

FirstPreviousNextLastExit  Slide 2 of 35 COPYRIGHT © 2020 by the contributing authors
  Wiki Applications - Parts Next 


Applications may make use of:

  • Multiple Plugins and/or variables

FirstPreviousNextLastExit  Slide 3 of 35 COPYRIGHT © 2020 by the contributing authors
  Demo: Power Calendar: Next 


A simple Wiki application using several plugins:

  • Calendar
  • TimeTable
  • ToolTips
  • Comment
  • Glue

All in two pages! (1 for the app; 1 for the data.)

  • Month view:
    Month view

  • Week view:
    Week view

  • Event list view:
    Event List

  • Posting new event:
    Post New Event

hand Demo - Power Calendar

FirstPreviousNextLastExit  Slide 4 of 35 COPYRIGHT © 2020 by the contributing authors
  Wiki Applications - Parts Next 


Applications may make use of:

  • Multiple Plugins and/or variables

  • HTML Forms

FirstPreviousNextLastExit  Slide 5 of 35 COPYRIGHT © 2020 by the contributing authors
  Demo: One Button Page Creator Next 


Create a new Wiki page by entering a name and clicking a button.

Application includes:

  • An HTML form with one text field

  • Formatted SEARCH to index pages created this way.

screenshot

hand Demo - New Topic creation tool

FirstPreviousNextLastExit  Slide 6 of 35 COPYRIGHT © 2020 by the contributing authors
  HTML Forms Next 


  • Provide a convenient way to enter initial information.

  • Used to send values to Wiki topics via URL parameters

  • embedded in a topic

  • Has a "Submit" button

  • <form action... >=

FirstPreviousNextLastExit  Slide 7 of 35 COPYRIGHT © 2020 by the contributing authors
  Page Creator HTML Form (Code) Next 


The code for a very simple form; it presents a text "fill-in" field and a submit button.

<form action="%SCRIPTURLPATH%/edit%SCRIPTSUFFIX%/%WEB%/"> 
  <input type="hidden" name="onlywikiname"  value="on" />
  <input type="hidden" name="onlynewtopic"  value="on" />
  <input type="hidden" name="topicparent"   value="WikiTrainingAdv"  />

  <input type="text" name="topic"  size="30" value=""  />
  
  <input type="submit" value="Create New Topic"/>
</form>

FirstPreviousNextLastExit  Slide 8 of 35 COPYRIGHT © 2020 by the contributing authors
  Terminology: Forms Next 


Form: _an editable data area on a web page with (possibly) menus, checkboxes, text fields... and some way to submit the data to a program on the server._

Wiki applications may use forms, to pass data between pages or to store data in a topic.

Note: The word form may refer to:

  • HTML Form
    • <form action=... >

  • Wiki Form
    • defined in a specially-formatted Wiki table
    • automatically converted into HTML forms for editing

We'll come back to HTML forms in a bit.

FirstPreviousNextLastExit  Slide 9 of 35 COPYRIGHT © 2020 by the contributing authors
  Structured Wiki Next 


Structured wikis support "database-like" manipulation of data stored in forms on pages. The result is a small application inside the wiki.

  • By adding form-based input to freeform content, you can structure topics with unlimited, easily searchable categories.

  • Form input values are stored as Wiki metadata.

  • All data is saved in the page and can be edited as easily as editing regular content.

  • One topic (instance page) is analogous to one "record" in a database.

hand See: Wiki:Codev.StructuredWiki and Wikipedia:Structured_wiki

No "real" database engine is used. Wiki metadata is stored in topic pages along with the content.

FirstPreviousNextLastExit  Slide 10 of 35 COPYRIGHT © 2020 by the contributing authors
  Structured Applications - Parts Next 


Structured applications may make use of:

  • Multiple Plugins and/or variables

  • HTML Forms

  • Template Topics

  • Wiki forms

  • Instance Pages

  • Index / Formatted Search

FirstPreviousNextLastExit  Slide 11 of 35 COPYRIGHT © 2020 by the contributing authors
  Structured Applications Next 


data flow diagram

FirstPreviousNextLastExit  Slide 12 of 35 COPYRIGHT © 2020 by the contributing authors
  Structured Applications: Features Next 


  • Multiple Plugins and/or variables
    Powerful data manipulation

  • HTML form
    Provides a convenient way to enter initial information.

  • Template topics
    Add consistency to the look and feel of your pages

  • Wiki forms
    Provide a way for users to add and update structured data in a consistent way.
    Meta-data stored in a Wiki form makes searching and indexing simple.

  • Instance Pages
    Equivalent to a "record" in a data base; one instance page equals one entry in your application.

  • Index / Formatted Search
    Query your pages. Dynamic indexes.

FirstPreviousNextLastExit  Slide 13 of 35 COPYRIGHT © 2020 by the contributing authors
  Template Topics Next 


Template topics add consistency to the look and feel of your pages.

Template: a pre-developed page layout used to create new pages with the same design, pattern, or style

  • Define the default text for new topics
    Analogous to stationery in word processing programs

  • Automatically expand certain variables, such as %DATE% and %WIKINAME% when copied

In a Wiki application, template topics

  • Provide a consistent look and feel to all pages within an application

  • Are copied programatically when a new "instance page" is created

  • Allow variables to be passed in and evaluated

(Note:Wiki has several kinds of "templates". We'll only be discussing template topics as used in Wiki applications.)

FirstPreviousNextLastExit  Slide 14 of 35 COPYRIGHT © 2020 by the contributing authors
  Wiki Forms Next 


  • Describe the metadata to be associated with a class of instance pages
    Guarantees consistency of metadata

  • Provide a formatted user interface for data entry or update on instance pages

  • Analogous to a table definition in a database "schema"

Unlike HTML Forms

  • Defined in Wiki tables (specific format);
    Wiki converts the table information to a form when viewing or editing.

  • Topic name (usually) ends in the word Form (TeamDirectoryForm)

  • Usually enabled for a web (WEBFORMS variable)
    • Can be added to any topic using the "Add Form" button
    • Often pre-attached to template topics

FirstPreviousNextLastExit  Slide 15 of 35 COPYRIGHT © 2020 by the contributing authors
  Wiki Forms Next 


(images are cropped; actual forms are longer...)

Wiki Form definition (in Wiki table)

screenshot
Wiki Form in "View" mode

screenshot
Wiki Form in "Edit" mode

screenshot

FirstPreviousNextLastExit  Slide 16 of 35 COPYRIGHT © 2020 by the contributing authors
  Instance Pages Next 


Instance pages are the topics representing individual entries in your application.

The template topic is copied and the copy becomes an instance page.

An instance page may may represent
  • one project
  • one address book entry
  • one troubleshooting procedure
  • one blog entry
  • the status report for one week
  • ...

FirstPreviousNextLastExit  Slide 17 of 35 COPYRIGHT © 2020 by the contributing authors
  Index / Search Next 


  • Use a strong naming convention to support dynamic indexing

  • Data in Wiki forms makes searching easy

FirstPreviousNextLastExit  Slide 18 of 35 COPYRIGHT © 2020 by the contributing authors
  Example Next 


FirstPreviousNextLastExit  Slide 19 of 35 COPYRIGHT © 2020 by the contributing authors
  Where is the Form Data Stored? Next 


Information added to Wiki forms is stored in "meta data" along with page content.

View content with raw=debug

FirstPreviousNextLastExit  Slide 20 of 35 COPYRIGHT © 2020 by the contributing authors
  Examples Next 


  • A Team Directory

  • A Weblog

  • Project Tracking

  • Runbooks

FirstPreviousNextLastExit  Slide 21 of 35 COPYRIGHT © 2020 by the contributing authors
  Example: Team Directory Next 


  • HTML creation form

  • Template topic
    Template INCLUDEs "shared content"
    • Format can be changed at a single point for all instance pages!

  • Wiki form
    • All data stored in Wiki form

  • Create an entry
form screenshot

  • Template
screenshot

  • Sample entry
form screenshot

  • Wiki Form
screenshot

hand Demo - Team Directory

FirstPreviousNextLastExit  Slide 22 of 35 COPYRIGHT © 2020 by the contributing authors
  Example: A Weblog Next 


  • HTML creation form

  • Template topic

  • Wiki form
    • "hidden" fields in Wiki form automatically populated
    • uneditable fields (type = "label")

  • Customized look&feel
    • custom "View"
    • different colors, side bar

  • Search
    • Main page only shows "published" status
    • List page shows all entries

  • Main page
Blog App screenshot

  • Create an entry
Blog App screenshot

  • List all entries
Blog App screenshot

hand Demo - Blog

FirstPreviousNextLastExit  Slide 23 of 35 COPYRIGHT © 2020 by the contributing authors
  Example: Project Tracking Next 


Many special features:

  • Instance pages feature "create" buttons for supplementary documents
  • Buttons change to links when suppl. documents have been created
  • Nearly all content is shared

Project Tracking App screenshot

Project Tracking App screenshot

Project Tracking App screenshot

hand Demo - Project Tracking

FirstPreviousNextLastExit  Slide 24 of 35 COPYRIGHT © 2020 by the contributing authors
  Example: Runbooks Next 


  • Customized instance pages.
  • Search and indexing

  • Runbooks web
Runbook Web screenshot

  • Sample Runbook
    Runbooks App screenshot

Runbooks App screenshot

hand Demo

FirstPreviousNextLastExit  Slide 25 of 35 COPYRIGHT © 2020 by the contributing authors
  Demo: Weekly Status Reports Next 


A slightly more complex application that includes:

  • An HTML form

  • A template topic (StatusReportsTemplate)
    • Editable Tables

  • Uses the current month to name the new topic

  • Date "picker" - choice pasted into topic content

  • Standardized naming convention (StatusReports200906r1)

  • TOPICTITLE variable provides more user-friendly page title

hand Demo - Weekly Status Report (example)

Status_Reports.jpg

Status_Reports2.jpg

FirstPreviousNextLastExit  Slide 26 of 35 COPYRIGHT © 2020 by the contributing authors
  Status Reports HTML Form (Code) Next 


<!-- 
   * Set YEARMO = %SERVERTIME{"$year$mo"}%
-->
<!-- JSCALENDAR -->
%INCLUDE{"%SYSTEMWEB%/JSCalendarContribInline"}%

  <form action="%SCRIPTURLPATH%/save%SCRIPTSUFFIX%/%WEB%/"> 
  <input type="hidden" value="%TOPIC%%YEARMO%rXXXXXXXXXX" name="topic" />
  <input type="hidden" value="form" name="action">
  <input type="hidden" value="%TOPIC%Template" name="templatetopic" />
  <input type="hidden" value="%TOPIC%" name="topicparent" />

  <input type="hidden" value="%USERNAME%" name="qUser" />

  For the week ending...

  <input type="text" name="qWeekOf"  size="20" id="datecell" class="twikiEditFormTextField" />
  <input type="image" src="%PUBURL%/%SYSTEMWEB%/JSCalendarContrib/img.gif"  alt="Calendar" 
     onclick="javascript: return showCalendar('datecell','%e %B %Y')" />

  Choose the appropriate Friday

  <input type="submit" value="Create Page" />

</form>

FirstPreviousNextLastExit  Slide 27 of 35 COPYRIGHT © 2020 by the contributing authors
  Status Reports Template Topic (Code) Next 


<!-- 
   * Set TOPICTITLE = %URLPARAM{"qUser"}% %TOPIC%
-->

---+!! Status Report for %URLPARAM{"qUser"}%

For the week ending %URLPARAM{"qWeekOf"}%

FirstPreviousNextLastExit  Slide 28 of 35 COPYRIGHT © 2020 by the contributing authors
  Template-only Code Next 


You can put code into a template that will not be copied to instance pages. For example, this code prints a notice warning users not to edit the template directly.

%STARTSECTION{type="templateonly"}% 
---+!! %SPACEOUT{%TOPIC%}%
%INCLUDE{Help.WikiTutTemplateStop}%
%ENDSECTION{type="templateonly"}% 

STOP!

Read This Notice

DO NOT edit the Template Unless you Know What You Are Doing!!!

FirstPreviousNextLastExit  Slide 29 of 35 COPYRIGHT © 2020 by the contributing authors
  Use Case: Engineering Standards Next 


Before

  • One page per document
  • No standardized "look" to pages
  • New pages manually added to a table
  • Recently accepted documents manually marked as "New" NEW
    (with risk of forgetting to remove NEW over time)
  • Not easy to search (e.g. "Show me only Mandatory Standards")
  • Lots of manual effort

After

  • One page per document
  • Template provides standardized "look" to pages
  • New pages dynamically indexed
  • Recently accepted documents marked as "New" NEW based on date comparison
  • Easy to search (e.g. "Show me only Mandatory Standards")
  • Manual effort confined to writing the doc

FirstPreviousNextLastExit  Slide 30 of 35 COPYRIGHT © 2020 by the contributing authors
  Use Case: Engineering Standards Next 


Feature: Index table of all documents.

Before

Table is updated by hand. Are entries in sorted order?

(only 2 entries shown!)
%EDITTABLE{format="|textarea, 2x30|select, 1, Mandatory, Standard, Aspiring, Recommended Practice, Intriguing Practice, Deprecated|date, 11, Jan/2010, %d/%b/%Y|select, 1, Development Process, Platform, Serving, Globalization, Deployment, Networking, Batch Processing|label|label|" changerows="add" }%
| *Name* | *Status* | *Date of Adoption* | *Area* | *ESG Contact* | *Engineering Contact* | *Applies if...* | *To comply* |
| [[StdTracking][Defect Tracking: Bugzilla (bug.corp)]] | Mandatory | 01/Jun/2006 | Development Process | %SEARCH{"ESG Contact" topic="StdTracking" regex="on" nonoise="on" format="$pattern(.*?ESG\sContact\:\*\s*([^\n\r]+).*)"}% | %SEARCH{"Engineering Contact" topic="StdTracking" regex="on" nonoise="on" format="$pattern(.*?Engineering\sContact\:\*\s*([^\n\r]+).*)"}% | Always | Must use Bugzilla to track bugs |
...

After

Table is built dynamically. Entries are always sorted.

%TABLE{sort="on"}%
| *Name* | *Compliance Level* | *Status* | *Date of Adoption* | *Area* | *ESG Contact* | *Engineering Contact* | *Applies if...* | *To comply* | *Created On* | *Created By* | 
%SEARCH{
search="META:FORM{name=\"EngineeringStandardsForm\";META:FIELD{name=\"Status\".*?value=\"%URLPARAM{"qStat"}%;META:FIELD{name=\"Compliance.*?value=\"%URLPARAM{"qCompl"}%;META:FIELD{name=\"Area\".*?value=\"%URLPARAM{"qArea"}%;"  
%SearchParams%
format="| [[$topic][$formfield(StandardName)]] %IsNew% %IsDep% | %FieldsToShow% | $createdate | $createwikiusername |"
}%

FirstPreviousNextLastExit  Slide 31 of 35 COPYRIGHT © 2020 by the contributing authors
  Use Case: Engineering Standards Next 


Feature: Documents marked as "New" or "Deprecated*.

Before

"New" and "Deprecated" added manually to each row. ("New" must be removed manually, as well.)

| [[StdScm][%N% Source Control: Subversion]] | Mandatory | 01/Mar/2009 | Development Process | ... |

| [[StdBuild][%N%<del>Automated Build: Buildicus</del>]] | Deprecated | 01/Jun/2006 | Development Process |...

What does it mean to be %N% and also deprecated (<del>)?

After

"New" and "Deprecated" are calculated for each row, based on date comparison or metadata values. Set up variables once and let the computer do the rest. A different icon signifies "Deprecated".

   * Set IsNew = $percntCALC{$IF($formfield(DateAccepted), $IF( $TIME($formfield(DateAccepted)) > $TIMEADD($TIME(), -6, month), $percntN$percnt, ), ) }$percnt
   * Set IsDep = $percntCALC{$IF($EXACT( $formfield(Status), Deprecated ), $percntX$percnt, ) }$percnt

FirstPreviousNextLastExit  Slide 32 of 35 COPYRIGHT © 2020 by the contributing authors
  Use Case: Engineering Standards Next 


Feature: Format of each document

Before

No standardized look and feel. Copy and paste.

sample standard page (original format)

After

Standardized Look and Feel automatically applied using templates.

Sample standard paage (templated format)

FirstPreviousNextLastExit  Slide 33 of 35 COPYRIGHT © 2020 by the contributing authors
  Use Case: Engineering Standards Next 


Feature: Search

Before

Same search options as for any page.

Search_before.png

After

Specialized search concentrates on metadata.

screenshot

FirstPreviousNextLastExit  Slide 34 of 35 COPYRIGHT © 2020 by the contributing authors
  Reference Pages Next 


FirstPreviousNextLastExit  Slide 35 of 35 COPYRIGHT © 2020 by the contributing authors

This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email