Can't find the widget you are looking for? 

We will build a tailor made widget for you if you tell us what you want to do. Our experienced WEM consultants have built many widgets for our customers.

Please contact us at info@webbit21.com and tell us what functionality you want to add to your project.

This bar chart accepts an JSON input string that makes it possible to display as many series as you want. You can display the chart horizontally or vertically, stacked or not. Options to override the automatic min/max of the value axis and to set the value axis step size, width and height, legend position etc. The chart can be saved as a png-image to the datamodel.

With this widget you can turn the default WEM single-select radio buttons and multi-select checkboxes in beautiful and customised bootstrap-styled check-boxes or radio buttons.

The widget has many options to customize the design, such as size, color, icons and positioning.

In WEM you can only open a file directly (in a new tab) using a hyperlink. This may be undesirable in some cases in terms of layout. Also, if you use a file hyperlink on a datagrid on which an event is defined for a row click, you will unwantedly trigger that event when you open the file.

This widget allows you to open a file by clicking a button that you can define yourself. Also clicking the button will not fire events of a datagrid 'row click' event.

A button that triggers a menu with multiple actions. The widget is generated based on a conceptset. The selected menu option will be stored in a single select field. This widget has many options to style the button and the menu to your needs.

Create a customized button with the option to display a badge with extra info.

You can create any button that is available in WEM but add extra styling if you want. If you display a badge, you can make it 'pulse' to attract attention to it.

With this widget you can place up to 3 buttons in the header of a modal. Sometimes this is required to improve user experience. E.g. when you want avoid scrolling down a long overlay. Ideal for 'paging' functions or to put a second 'Save'  or 'Order' button on your overlay.

This widget gives you a very professionaly looking set of gauges. The possibilities to style these gauges are endless. The gauge can be set as a linear or radial gauge. 

WEM has a IBAN validation function. However, this function is obsolete as it can only verify Dutch IBAN numbers of a certain type. With this IBAN Widget you can verify whether the entered IBAN is a valid number. The widget does not connect to any external datasource so entered IBAN are not sent anywhere.

By default, the close button on an overlay closes the overlay without following any exit. In some cases you don't want to give the user the option to leave a certain (work)flow without having control on what happens to data that is being used/modified.

With this widget you can keep a close button for user experience but ensure an exit is followed so you stay in control of the flow! You can also change the color and opacity of the close x.

With this widget you can compress images in your WEM project. You can upload an image file in the browser or use a file that already is present in your datamodel. You can set the compression, add a watermark text, add effects (greyscale, sepia and blur). Great tool to keep performance for screens or reports with many pictures. You can also create thumbnails by setting the output width and/or height.

By default WEM only allows you to select one condition to highlight a table row (background color styling). With this widget you can combine multiple conditional stylings in one datagrid.

With this widget you can add any styling to datagrid rows based on conditions related tot the row values and you can use different stylings for as many conditions as you want.

A widget that allows you to copy a text(area) to the clipboard from the WEM database model. Just takes one property (text expression) that will be made available for the user on the clipboard.

With this widget you can display one or more flip styled countdown clocks on your user interfaces. Simply select a date + time to start counting from and off you go.

Includes options to change colors, size, shadow. You can decide to hide the day counter. Aftter the counter is finished you can trigger an event (refresh, exit or flowchart).

Create a link that will automatically add an appointment to your Google, Yahoo or Outlook/iCloud (ics) Calendar. You can use the widget to display a button / hyperlink or save the link to the data-model for later use (e.g. include in an email).

With this widget you are able to retrieve information on the viewstate of a datagrid (sorting column, sorting order and paging nr) and store this information in the WEM datamodel for further use. This information can be used amongst others for advanced sorting techniques.

With this widget you can easiliy detect the type of device on wich your app runs and the type of browser that is used. The widget will return values to a connected field in your data model. If a device is not a mobile device it will return 'NOMOBILE'. In other cases it will return the operation system of the mobil device (typically IOS or Android).

With this widget you can create a list of items from a WEM databaselist which you can then sort by dragging and dropping the list items.

The widget creates an array of the actual order of the items which is stored as JSON so you can update your list later on. 

Create custom single-select inputs that can display much more than just a line of text in a dropdown. The labels can contain custom html that you define in a text expression in which you mix hmtl and data from a datalist. And you can add menu items to the list to allow for custom actions! Many options to style the dropdown + extra features such as sorting and searching.

With this widget you can create a text dropdown with values you define manually or from a datalist. The value will be stored in a textfield. This is ideal if you want to limit the input for a text field, but do not want to use ontology or a reference field.

Options to sort, search, set default text and run event after update.

With this widget you can create a flip panel that consists of a front and back panel that will flip from front to back on hovering over the panel. You can set the styling of the front and back panels seperately. You can us headers, rich text content for the panel body and background images with adjustable opacity.

With this widget a full screen loader overlay is shown when you leave the User Interaction on which you place this widget. This is useful if the next screen may take some time to load so the user knows that the app is busy. Many options to style the overlay and text (incl. spinner icon) and to blur the background.

Another cool gauge style control that displays a value. This control can only be used to display a value (not to set or change a value). With this widget you can also indicate one or more targets by setting 'zones' and labels. Many options to customize the look and feel.

A powerful and interactive control of type 'gauge'. The widget has several options to change the layout of the gauge and can also be used as 'read only'.

As the gauge can be operated with the mouse wheel this could be a convenient choice for ranged inputs. The widget can trigger events after it has been update (refresh/exit/flowchart).

A widget that retrieves the current screen size (of the active window) so you know what the avaliable height and width of your UI is. The values of width and height can be stored in your WEM database for use in your project. This allows you to add customised rules for responsiveness in your projects where the default options are not sufficient. It can also be used to detect whether a user switches from a vertical to a horizontal view (e.g. on a tablet).

Widget to create an advanced single select input for ontology items (there is a seperate type for datalistst). Compared to the standard select with this widget you can:

• display icons in front of the select labels
• search select items
• sort the list of items
• change the colors of icons, text and change the icons/text sizes

Widget to create an advanced single select input for datalists (there is a seperate type for conceptsets). Compared to the standard select with this widget you can:

• display icons in front of the select labels
• search select items
• sort the list of items
• change the colors of icons, text and change the icons/text size

With the image full screen viewer you can easily display any image in full screen. In the full screen view you can zoom in further or close the full screen view with a cusomizible button. The widget displays the preview image which can be another (smaller) file than the full screen image so you can display image galleries without long loading times.

With this OCR widget you can extract text from images and store it in the WEM datamodel. Based on the powerful 'Tesseract' OCR engine. Options to show a progress bar and preview of recognised text, autostart and language. You can use this widget to make images searchable or to automate input processes that involve processing invoices etc.

This widget creates a default text input form field that triggers an event (refresh/exit/flowchart) when the 'enter' key is hit. This can be very handy if you want to make forms without buttons (e.g. verification of a password/code etc) to save time.

With this (free) widget you can display an WEM image file in your HTML as Base64. This can be handy for emails or pdf's or any other situation where you do not want to use a link to an image file. Simply use an expression to point to the right image, set the width and height (optionally) and the widget will turn the file into a Base64 encoded image.

iOS style switch buttons to change a boolean value (true/false). The 'toggle' works the same as a standard 'check box' or 'yes / no' radio button. Instructions: You can add 1 or more toggles on your page. The toggles can be connected to any (temporary) boolean data field that can be used with normal 'check boxes' or 'yes/no radio buttons'. You can put the toggle in forms, in repeaters or datagrids.

This widget turns a JSON string into a tree-representation with collapsible branches. Its provides a simple way to review JSON that you retrieve from other sources or that you have generated yourself. Simply select the text field that contains the JSON string and indicate whether the tree should be collapsed or not and that's is.

Line chart with option to include up to 8 series. Options to set line color, dash-styling, line width and 'smoothing'. Option to save the chart as an image for use in e.g. pfd / reports.

In WEM you can only upload 1 file at a time. In some cases there is a need to be able to upload multiple files in one go. This widget makes this possible. The new version also supports 'drag and drop'! With the latest version you can upload as many files as you want (as long as the browser can handle it). Files will be exported to WEM as JSON which is very easy to import to the datamodel.

In WEM multiselect (ontology) inputs are always shown as multiple (horizontal or vertical) check boxes which take a lot of space. With this multiselect dropdown you can select multiple values in a dropdown list. This widget creates a multi-select dropdown input linked to a multiselect datafield. Comes with extra features such as: sorting, searching and event triggers, select all etc.

Create dropdowns with a number range in a wink with this widget.After setting the min and max values the dropdown will be created with the numeric range between min and max. The value can be stored to any numeric field. Great alternative to manual inputs with validation.

Options to run different events after update and set custom classname so you can define you own styling.

Input control for numbers with option to display group symbols ("23.500,55") in the input field. This is not possible with the standard WEM input control field.

Also, the text alignment can be set to left, center or right. The widget also contains an update event which can be an exit (which is not available for standard WEM inputs).

With this widget you add 2 lines as labels and also apply specific styling to the 2 lines. In some cases you want to add more information to radio-button / check box labels. In standard WEM that is not possible.

Works with single-select and multi-select input fields.

Widget to make a overlay (modal) draggable and resizable (up to 'full screen'). WEM overlays are always centered. Sometimes it is convenient to be able to move it aside to be able to see the information that was underneath it, in stead of closing and opening it again. Also, with this widget you can change the width of the overlay on the fly up to full screen width. If you have a lot of content, this will give a better user experience.

With this widget a 'maximize' icon is shown in the overlay header with which you can maximize the overlay screen to fill up the available space. After maximizing the overlay the icon changes into a 'restore' icon to reset the overlay to the original size. You can trigger events after maximize and/or restore.

Add a panel badge to any WEM panel or overlay with this widget. You can display any kind of data in the badge and set the size, (border) color and position as you wish. The badge will expand in width if content is bigger than the standard size.

With this widget you can add a banner to WEM panels and overlays for all kinds of purposes, like tagging, warnings etc. You can place the banner on any corner of a panel and set size, color, label text, shadow etc.

This widget puts a password input on your UI that is able to show the password that is entered so the user can verify that the input is correct.

The masked password will be revealed when the 'eye'-icon is either clicked or hovered over.

With this PDF viewer you can show the PDF on your page. The viewer can be easily scaled as it adjusts automoatically to the container / columns etc it is placed in. Built-in functions such as zoom, rotate and download.

With this widget you can merge two PDF documents together. The source PDF documents come from your WEM datamodel and the merged PDF will be saved to a datafield of your choice. You can set the filename of the merged PDF and set an event to be run after the merged PDF is ready.

The 'PDF to text' widget extracts all text content from a pdf file. You can use the text to make search of pdf documents possible in WEM or to automate extraction of information from pdf files (like invoices). The selected text is stored in a text field in the WEM datamodel - as plain text or as JSON per page or block. Options to show a preview, autostart and run an event after the job is finished.

This Pie chart widget has outside labels that are displayed with a line connecting to the corresponding pie piece. Also, this widget can sort the data on value (descending) so that the pie chart displays the biggest pie pieces first (starting from the middle / top). Options to change size, color backgroundcolor of the pie chart. Option to save the pie chart as a png image (e.g. for use in pdf etc).

With this input control of type 'pincode' you allow users to input acces codes very quickly and easily. The input only accepts numbers and after the last number is entered you can directly run the verification procedure of your choice.

Options to give the input autofocus, set the number of inputs and to split the input in groups (e.g. 2 x 3 inputs). Accepts numbers only (this version). After the last input is entered, an event can be fired (exit, flowchart, refresh). Options to style the input (size, font-size, color) and to mask the numbers.

Standard WEM does not support any type of (dynamic) pivot views.

The pivot table widget transforms a regular datalist into a pivot table. This way you can aggregate information by showing count, sum or average values on a dataset, plotted on a X and Y axis of your choice.

Flexible menu generator that can trigger different type of events (exit, flowchart, navigation). The menu is generated from an ontology list and has many options to set the style like include icons, font-size and color, disable or hide items dynamically. The widgets passes the chosen menu item to a single select field in the WEM datamodel so you can decide what action to take.

Create attractive draggable Post-it notes on your screen! You can use any (rich)text as content and style it as you want.

This free widget is brought to you by Webbit21!

Create a preview of the sheet(s) in an Excel workbook (xls or xlsx) in your WEM project. You can select a file in the WEM datamodel and create a preview to display the content. You can limit the nr of columns and/or rows in the preview, set the styling of the table and optionally show workbook and sheet info.

With this widget you can print a (part of the) screen directly without creating a pdf or excel document. You can select a part of the screen (e.g. a table) or print the whole body. The widget will open the print dialogue directly (if you allow pop-ups in your browser).

You can set the widget to run automatically or show a print button to start it manually. After finishing you can set an event (exit, flowchart) 

With this widget you can display values as a pie chart or progress bar.You can put the pie chart or progress bar in a datagrid or repeater. Size and colors can be set in properties which also accept expressions so you can change the layout of the progress bar based on settings or values in your datamodel.

QR code generator with many options to set the styling. Options are: use logo and/or background image, set colors of QR code, alignment box, positioning boxes (inner and outer).

You can save the QR code image to the WEM datamodel.

With this widget you can use REGEX (regular expressions) to find and/or replace string patterns in a text field. REGEX allows you to define complex string matching formula's that are hard to implement in native WEM.

The widget allows you to match string patterns and do a count or replace matches with substrings that are defined in the regex formula or by a regular string expression.

The default rich text editor does not allow pictures or video links to be inserted in the text.

This widget allows you to include pictures and embedded videos in your rich text fields by selecting them from file or simply pasting then in the editor! The editor has a nice clean en modern look. You can also edit the option that are shown in the toolbar.

Widget to scroll a certain element into view.

Options:

• set scroll delay
• set animation / smooth scroll + speed - scroll into view
• write to data model when scroll has been done (e.g. to prevent scroll on every refresh)

This is a new version of the default slider widget that is provided by WEM. In addition to the existing widget more properties (like min/max) are expressions in order to parameterize these values.

Also you can trigger an event after the input has changed, define a custom icon + color for the slider handle and set the width of the slider. More features will follow.

Widget to sort ontology selects (single select dropdowns or horizontal/vertical multiselects based on ontology items). In WEM it is currently not possible to sort ontology lists dynamically. The only option is to manually change the order in the modeler. Especially in a multi-language project this leads to unexpected outcomes and bad user experience. With this widget you can sort all ontology selects (A-Z and Z-A).

With the splash widget you create a perfect start of your app. Just select an image and splash style and your are good to go! The splash widget will clear all other screen elements so your picture will get all the attention. After the animation has ended you can select an exit to go to the required entry point of the app.

This widget creates beautifully styled text inputs with many options for server side validation. There are many properties to set the styling of the inputs. Includes option to display inputs as required fields, disabled or read-only, validated or not validated. The download contains 2 widgets (for text and number inputs)

Tabbar that allows you to show/hide information on your UI without refreshing your page (thus avoiding unneccesary delays). The tabbar has the same functionality as the 'normal' tabbar + some extra layout features. The tabbar can also be used as a standard tabbar with refreshes if preferred. In addition to the standard tabbar you have some extra options in terms of layout.

This new icon timeline widget you can create horizontal and vertical timelines with boxed icons as markers. The markers are based on a multiselect field (ontology). This widget has many options to set the styling such as icon class, marker size, shape, background color, line thickness, marker border etc. You can set most styles for 'selected' and 'non-selected' items. You can size the timeline based on a fixed stepwidth or based on the available space. Is has a automatic resize function for responsiveness.

A widget to display steps / phases in a process in a horizontally 'timeline' fashion. All items on the timeline can made 'clickable' to fire an exit or flowchart. The widget has many options to change the layout and behaviour.

With this 'toggles' widget you can use a huge library of modern looking switches in you projects. The switch is connected to a boolean (yes/no) field in your datamodel. You can choose from 13 main types in several variations. Based on the powerfull 'MoreTogglesCSS' library.

Widget to unzip a zip file to the WEM database model. You can unzip a file containing an unlimited number of files. The files will be stored into a JSON datastructure that you can import using the standard import node. The only limitations are your browser and the size limits as imposed by WEM. You can unzip a file from a file that is stored in the WEM datamodel.

With this widget you can apply styling to elements that appear in the visible area of the screen (called viewport). This way you can improve user interaction and draw attention to functions or information in an interactive way. Simply add an attribute to each element you want to target and define the style that should be applied when the element becomes visible!

With this widget you can create word clouds from any text field in your data model. Just select a source text field, set the width and height and a beautiful word cloud will be created.

In WEM the export node only allows the creation of a single worksheet. Also the export node has limited flexibility in terms labels and is less user friendly than putting together a datagrid on a UI.

With this powerfull widget you can turn a page with multiple datagrids into an Excel (xlsx) file where every datagrid is created on a different worksheet/TAB. The created Excel file can then be downloaded directly or saved to the datamodel.

Widget to create a zipfile of files that are available in the WEM datamodel. The zipfile can be downloaded directly of stored back to the datamodel.

It is possible to add folders and subfolders in the ZIP files that are created with the widget.

You can define an event (exit, flowchart) when the zipfile is ready.