You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: ColdFusion

ColdFusion: Article

Build a Better Help Screen

Build a Better Help Screen

The U.S. Fish & Wildlife Service had lived with their ColdFusion-based, accomplishment-reporting Web site for about a year. The application allowed employees to report field accomplishments to area managers who then edited and released the reports for internal-only or public review on their Web site, or via e-mail or fax to the media or Congress.

I had used a fairly standard frame layout with a header, logo corner, left menu, and main area. Additionally, there was a narrow strip under the title where a drop-down selector and a user identifier were loaded when field reps signed in. I added a small panel at the bottom where help information would be displayed whenever a help icon was clicked.

The help table is simple, consisting primarily of a short, text-based, key-term field and a longer memo field that holds the help information.

Can't See the Trees
Even with six frames, the main viewing area was adequate on a 17-inch or larger monitor, but smaller screens were a tangled confusion of scroll bars and mini-panels. Employees (field reps) might be using the latest computer equipment or antiquated computers with 14-inch monitors. The field reps with the smaller monitors found it difficult to view the tiny main panel, and the vertical and horizontal scroll bars made even more of a mess (see Figure 1).

My client gave me free reign to do anything to provide more room for the main display area. I tightened the frames and moved the menu onto the user information strip by using smaller buttons (see Figure 2).

I had removed the narrow help strip at the bottom, but still wanted the ability to display help information to users without causing them to lose their place on the web site - especially if they were in the middle of filling out a form. I could have used the <A title="help text here" > </a> approach, but the help information is pulled from a database to allow it to be updated over time. I didn't want to add to the page-load overhead by querying the help table on every page that had a help button. I could have used a target= "_blank" anchor to display help information in a new browser window, but I wouldn't have had control over its size or location. I felt it would confuse users if some or all of the main window was hidden when the new browser window was spawned.

JavaScript Limitations?
JavaScript seemed to be the way to go, but I hadn't taken the time to learn it yet. I picked up a beginner's book and began to read in earnest. My first attempt at solving the problem was to write a function that would dynamically load the results of a ColdFusion query and display it in an alert box. My theory was that I could use the <IMG> tags' OnClick() function with a parameter to initiate a query, load the information into the alert box, and display the help information to the user. Very clean, very professional looking, and I get to keep my newfound screen real estate.

JavaScript refused to cooperate. I tried several methods, but couldn't get the information into the alert box unless I queried the help table every time I loaded the page.

One Step Forward...
Back to square one. I found an example where JavaScript was used to create a new window and dynamically write an HTML page. I created a working CF script and copied it into a JavaScript function. Clicking the button was supposed to execute the function that was, in turn, to write the code into the new window.

Still no go. JavaScript executed the embedded ColdFusion instructions as soon as I loaded the parent page. Trying to fool it with """ or any other workaround didn't get me anywhere because the resulting dynamically written file was an HTML page, not a CF script.

Never Say Die
I'm not easily deterred by a few minor setbacks, but this problem was looking an awful lot like my JavaScript Waterloo. Suddenly, I had a revelation: what if the program I wrote called a static ColdFusion script that then handled the query and generated the results?

Even better, I discovered that the first parameter of the JavaScript "open" function would call a URL. The solution was simple! Use OnClick() to call a function with a parameter. The function would create a new window and call a ColdFusion script with the help query parameter. The results of the CF program would populate the new JavaScript box.

First I needed a ColdFusion program that would search the help table for a parameter and display the results of the query. HelpLine.cfm (see Listing 1) searches for the key term and outputs the query results (see Figure 3). The Close button (also JavaScript) provides a clean method of exiting, and the topic is displayed in light gray at the bottom of the screen. Displaying the topic name helps you find that specific item later when you need to update the help text.

To make this help-display capability available to all the CF programs in that application, I loaded the HelpWindow() into the Application.cfm file. This function is to be called with a parameter. HelpWindow() creates a new, nicely formatted browser window, then executes HelpLine.cfm, which populates the window:

<script language="JavaScript"> function HelpWindow(TheTopic) { window1=window.open("helpline.cfm?topic="+TheTopic, "NewWindow1","toolbar=no,directories=no,menubar=no,scrollbars=yes, width=600,height=300,left=200,top=100"); } </script>

The final piece of this puzzle is to enable a call to HelpWindow() with the appropriate parameter when the user clicks on a help button; we do this by placing the function name in the OnClick method of the <IMG> tag. Note the location of the parameter GEOREGION. We'll pass it through HelpWindow() to Help-Line.cfm where it can be used in the query to find the appropriate help information:

<img src="../images/btnHelp.gif" width=15 height=15 alt="Click on the question mark to display information about this item. It will appear in a new window in the middle of your screen." border=0 align="middle" onclick="HelpWindow('GEOREGION')">

This code can easily be reused, enabling you to quickly provide professional-looking help displays with minimal effort. To recap, here are the four elements necessary:

  • HelpLine.cfm
  • HelpWindow() in Application. cfm file or the CF script it's called from
  • Help database, populated with data, and a datasource link
  • OnClick() functions of <IMG> tags programmed with the ap-propriate help parameter, as in OnClick="HelpWindow ('GEOREGION')"
Dynamic help screens are an excellent use of a temporary Java-Script window. Application users can quickly and easily get the information they need, close the window with little fuss, and return to exactly where they left off. This is especially beneficial on forms, where taking users away can cause problems and confusion.

More Stories By Randy Smith

Randy L. Smith is president/CEO of Midwest Computer Programming and Internet (www.mcpi.com), an Internet/intranet database solution provider based in Hudson, Wisconsin. He has been developing large-scale, Web-based applications for businesses and nonprofits of all sizes, as well as state and federal entities, since 1993. Randy has been working in the computer industry since 1978, and with ColdFusion since 1996.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.