HTML Widgets Module

Owned by Former user (Deleted)
Last updated: Dec 17, 2017 by Fawwaz YusranVersion comment
2 min read

Overview

The HTML Widgets module provides a set of reusable HTML form field widgets in order encapsulate the common input requirements for OpenMRS. This is an "under the hood" module, meant to be something that developers can utilize in their code. The intention is to provide a compelling alternative to FieldGen, with the following key distinctions:

  • Written completely in Java. No JSPs

  • Separation of Model and View (eg. a "Location Widget" can easily be re-rendered as a Select List, Ajax Autocomplete, Radio Buttons, etc)

  • Separation of HTML generation from rendering technology (does not need to be used via a JSP Taglib)

  • Handles all common Java and OpenMRS core datatypes, including Collections

  • Easily extensible by other modules

Download

Usage

The htmlwidgets module ships with a single web page which aims to both demonstrate and test each of the default Widgets. Once you have installed the module, you can access this page on your local server at :

http://your.Server.Name/openmrs/module/htmlwidgets/demonstration.form

Currently, the most common way of using the widgets is via the supplied tag library. However, they can also be instantiated and rendered programmatically. Below will show the most common use cases via tag library...

1. First, you need to import the tag library into your JSP like this:

<%@ taglib prefix="wgt" uri="/WEB-INF/view/module/htmlwidgets/resources/htmlwidgets.tld" %>

2. Now, you can add form fields in the following ways:

  • You have an Encounter model object, and want a form field to edit it's Location, named "encounterLocation":

<wgt:widget id="encounterLocation" name="encounterLocation" object="${encounter}" property="location"/>

This will create a select list allowing the user to pick a Location, populated by default with the current value of the encounter's Location

  • Now you want to change this from a select list to an ajax auto-complete widget:

<wgt:widget id="encounterLocation" name="encounterLocation" object="${encounter}" property="location" format="ajax"/>

  • Now you don't have a model object, but you just want to create a Concept Search widget on your page:

Widget Reference

TBD