Widget Wharf

Enjoy and make use of this space to learn and share custom widgets to enhance your Wavemaker application, a space with examples by our community members for the benefit of everyone.

About Custom Widgets

All about Custom Widgets

How to Create a Custom Widget

Trouble Shooting Custom Widget installation

Creating a Custom WaveMaker Editor component, from Mahieu.org

File Upload

The original file upload by Matt Small

Tom's file upload widget with multiple file parts

Tom's EXT JS "fancy" file upload widget

Example of Fancy File Upload

• Add the custom widget to your studio.
  • Download FancyFileUpload.zip
  • Save it to you WaveMaker home area as: \common\packages\custom\FancyFileUpload.js
  • Edit \common\packages\packages.js to add the widget.
  • Reload Studo - The widget should now be on your palette.
• Import example project.
  • Download savemusic.zip WM61 project export.
  • Import into Studio
  • Use music.sql in project folder to create database
    • From the directory containing music.sql from the mysql command line use:
    • create database music;
    • use music;
    • source music.sql
• Edit DB Connection properties
  • Open project save_music
  • Select music in Model tree under Non-Visual Components
  • Open properties (wrench icon)
  • Adjust and save as needed. Test should be successful.
• Run the project

[ "Custom", "File Upload", "wm.custom.FancyFileUpload", "wm.packages.custom.FancyFileUpload", "images/wm/button.png", "File Upload"]

The widget version used here is from this forum post. Other versions are available.
Older versions WM5/WM6 are available s from the same thread

Google Maps

Google Maps Widget by Peter Svensson

GMap.js

To use

Save the attached as GMap.js in your common area, \common\packages\custom\GMap.js

Add this to your packages.js

[ "Example", "GMap", "wm.custom.GMap", "wm.packages.custom.GMap", "images/wm/button.png", "Peter's Gmap"]

Reload Studio.

Add your Key to the properties. Use expression binding with quotes. e.g.

TinyMCE

Author - Tom
Forum Thread
Latest version

Gantt Charts with colorpicker

Shared via forum post by Tom
Custom Widget
Example Project
Resource DB export

FCKeditor

FCKeditor ver 2.5.1
How to Install

Customized TextArea

A customization of WaveMaker's TextArea widget that preserve line breaks when the editor was not editable.
Forum Node
Mahieu.org

Clocks

World Time Saver GadgetWorld Timesaver Gadget, by Tom. 
Forum Thread

Google Gadget Clock.  YouTube palette gadget modified for clock gadet. Forum Thread

Buttons

myButton -  Changes color and cursor when hovered and opens a href (exposed as a property) in a new window.

Panels

Collapsible Panes, by Phillip - Forum Thread

Drag and Drop

Drag and Drop example by Jeff