Just For Fun:  Enhancing IWP Possibilities With CSS and Javascript

Discussion created by steve_ssh on Jan 7, 2014
Latest reply on Jan 8, 2014 by gdurniak



This post falls into the category of fun experimentation, the target audience being those who like share ideas with regarding experimenting with various technologies.





I'd like to share a creative project that I've had the pleasure of working with. The project is related to Instant Web Publishing (IWP) of FM versions 11 and 12.




Personal Objectives of Project:


- Have fun creatively

- Challenge myself technically

- Deepen my knowledge of Javascript, CSS, and cross-browser coding




Practical Objectives of Project:


- Freely brainstorm about features I might like to see in a web-app development framework

- See how these features actually pan out in practice

- Share these ideas with others

- Create some tools that could potentially help developers who maintain legacy IWP projects




Result of This Exercise:


The result of this exercise is a library of code named "IwpElements".


IwpElements is a single file which can be hosted on a regular webserver, and then referenced by an IWP page (v.11, v.12).


This library allows developers to enhance the look, feel, and behavior of IWP layouts as they are rendered in the browser.



Originally, the idea was simply to provide the following:


- A means for allowing developers to customize IWP page elements by using CSS

- A means for customizing page behavior by providing a simple Javascript API for accessing, querying, and modifying IWP page elements



It was quite some time ago that these first two objectives were realized.


Shortly after that, a third objective was added:


- Create an API for using the library which eliminates the necessity of knowing Javascript


This, too, eventually came about -- in the form of a calculation-driven API. Using a calculation-driven API seemed like a reasonable decision, since, as FM developers, we are accustomed to working with calculations.




Examples of Some Of The Features Offered by The Library:


- Custom Formatting of Page Elements With CSS

- A Rich Palate of CSS Capabilities, e.g. Hover, Focus, and Pressed states, Field Padding, etc.

- Input Filtering and/or Validation

- Date And Number Formatting of User Input

- Conditional Formatting of Page Elements

- Conditional Disabling of Page Elements

- Conditional Hiding of Page Elements

- Placeholder Text and Select Menu Prompts

- Password Field Elements

- Alert Dialogs

- Selectively trapping the Delete Key so that it does not trigger the browser's back-button functionality




Additionally, there are some experimental features that I have been playing around with:


- Rich Text Editing Capability

- Keystroke Commands

- Integration with Speech Synthesis, to assist with accessibility




The Last Feature Worth Mentioning:


- Page abandon detection.


This feature is to mitigate the IWP bugs triggered by the user navigating backwards in the browser page history. It detects and responds to what I refer to as "page abandon scenarios" (browser back-button, browser window or tab closing, etc.). The library can be configured so that when a page abandon scenario is detected, the library will trigger a script on the server. This script can be used to properly log the user out of their session, and perform any clean-up routines, e.g. track who abandoned the browser window etc..




Sharing the Project:


It has been a delight working on this project. The amount that I have learned, and the thrill of the development have far exceeded my wildest expectations.


At this point, all that really remains is to share these ideas with any other like-minded developers who enjoy experimenting with combinations of technology to see what is possible. Hence, this post -- I will attach a demo file that illustrates some of the capabilities of the library, as well as a link to a video where I quickly take the viewer through a silent tour of the demo file. I sincerely hope that there might be a few folks out there who enjoy checking this out.


Questions are welcome. I have provided little in the way of an explanation for how to use the library, let alone how it works under the hood. Not knowing what sort of interest there would be for this project, I have not invested the time to create a tutorial, but if the interest is there, I will find the time to put together some material to familiarize developers not only with what features are possible, but also how the features are easily implemented.



Sincere Thanks To Two Friends:


One of the greatest joys of this project was meeting and collaborating with two new friends who took an interest in the project. Each of them provided me with valuable, feedback, inspiration, wisdom, and effort which has been of tip-top value for helping this project grow and blossom.



Many sincere thanks to:


- Chris Allred

- Nicola Grafe


The respect and appreciation that I have for both of you is without measure.






If you check out the video, please be warned that the video is blurry/grainy for the first 20 seconds, but, after that, it clears up and looks much better.


That's pretty much it - Thanks for reading & Happy New Year,





Kind regards,