wl-forms-training

Winlink Templates And Forms Training Materials

pages-build-deployment

This directory stores information and references for a training class that introduces Winlink Template and Form development.

Warning: Coding HTML, JavaScript, and CSS is an intermediate-level software development skillset.

Materials are set up in modules to build upon each other. By the time you are done with Module 4, you will have the basis for a functional, well designed and styled form.

This material is not comprehensive. As much as possible, I have reduced information down to bare minimums so that those new to web development can get onboarded and quickly start creating/editing basic Winlink Templates and Forms.

The code behind these modules is available here: wl-forms-training

Terminology

Winlink Form: An HTML webpage with a specially crafted Form element designed to work directly with Winlink Express to simplify data input using a familiar web-based user interface.

Winlink Template: A plain text file with Winlink specific syntax that can help rapidly define a standardized Message Layout, and integrate easily with Winlink Forms.

How To Use This Repository

  1. Clone to a local Git repo on a Windows machine (for live testing with Winlink Express), or a CodeSpaces or Docker container instance.
  2. CD to the repo root and launch VS Code or your favorite code editor that supports:
    • HTML
    • CSS
    • JavaScript
    • Markdown files (with rendering so they are easier to read)
  3. See Project Directory Structure and Module Instructions to understand where files are found and how to get started.

You can approach working with modules one of a few different ways:

  1. Recommended: Use Git to track your changes. This way you can always revert changes you’ve made to the module code files.
  2. Copy the module files to similarly-named files, matching extensions same-for-same, and working with the copies. This way, the original files are always available in your code editor.

Choose whatever you are most comfortable with.

Project Directory Structure

A compact overview of the repository layout with short descriptions.

. (root): README
|
\_ 1-hello-world - Beginner template: hello-world-template.txt
\_ 2-hello-form - Simple form + template: hello-form.html, hello-form-template.txt
\_ 3-form-functionality - Intermediate form + template example: functional-form.html, tagged-template.txt
\_ 4-form-style - Styled form example: styled-form.html, tagged-styledform-template.txt
\_ 5-txrx-forms - Transmit/Receive example forms: tx-form.html, tx-form-viewer.html, txrx-template.txt
\_ boilerplate - WDT's starter form example, and an updated HTML 5 version for reference
\_ tools - Helper script copies Template and Form file(s) to your Winlink Express installation's Global Templates directory

Notes:

Module Instructions

Instructions and background information in these modules will get increasingly more complex and lengthy.

Understanding the basics introduced in Modules 1 and 2 are probably the most critical short-term goals.

Longer term, it is up to you to seek resources and training to learn more about web development with HTML, CSS, and JavaScript. These skills will help you to build effective, attractive, and widely usable Winlink Forms.

Included Settings and Configuration files:

Below are recommended VS Code extensions to help create, update, and debug files in this project. If they do not install automatically, you can install/enable them manually.

If you want this list trimmed further or expanded with recommended themes or Git/GitHub helpers, update ./.vscode/extensions.json for your environment needs.

How To Install/Enable Extensions

In VS Code:

  1. Open the Extensions view (Ctrl+Shift+X).
  2. Search by name or ID, then click Install.

Optional: To enable only for this workspace click the gear for the extension and then click “Enable (Workspace)”.

You can also install VS Code Extensions from a PowerShell terminal:

# Install an extension by its ID
code --install-extension <publisher.extension-id>

The VS Code Extension IDs are available at the Visual Studio Marketplace

Getting Help With Templates and Forms

After installing Winlink Express, look in its root installation folder for two files:

Go to Winlink.org and peruse “HOW - TO Recipes” to find the following helpful resources:

Use the Winlink Express Help system:

Boilerplate Directory

Provides basic starting points for new Winlink Forms. There are 2 files:

There are issues with the WDT’s skeleton form:

Copy Helper Tool

PowerShell helper script Copy-TemplateFormFilesToWinlink.ps1 copies template and form files into your Winlink Express templates folder.

Two common usages are shown below.

# Just copy the template file(s) from srcPath
.\Copy-TemplateFormFilesToWinlink.ps1 -srcPath 'C:\path\to\templates'

# Copy template file(s) and form file(s) from srcPath
.\Copy-TemplateFormFilesToWinlink.ps1 -srcPath 'C:\path\to\templates' -includeForms

The script will copy all *.txt template files from the specified -srcPath, and if -includeForms is provided it will also copy *.html form files.

Note: The script does not distinguish between multiple forms and template files, it simply copies them all.

Bigfoot Bib Report WL Form

Code is availble here: Bigfoot-Bib-Report-WL-Form

I have built an Express server that is designed to work with Winlink Express Forms to help with:

Find the project and instructions on how to deploy and use it at my GitHub repo mock-wle-server

The Winlink Developer Team (WDT) is a group of volunteers that take time out of their day to make Winlink (the system, the app, and the feature sets) work, providing support through a public forum, and producing regular updates to program, system, and documentation. They deserve our thanks and support.