Background Stories, Interesting Facts and Announcements

Protogrid is alive and kicking. In this blog, our innovative engineers and creative graphic designers share their stories, anecdotes as well as useful tipps and tricks.

Powerful Protogrid Apps due to Javascript

Max Kellermeier on 2017-08-06

JavaScript is established as an integral part of the modern web. While static web pages were very usual in the early days of the World Wide Web and a long time after that, it's not possible to imagine pages without dynamic content nowadays. Due to its wide spread, there are many platforms and web services offering a JavaScript API. Hereby, a Protogrid App can easily be extended with external services. For example, to make automatic storage of searchable content from photos or scans in Protorid available,'s JQuery/Ajax API easily can be implemented. As shown in the screenshots, the scanned text is stored in less than no time and sent by mail to the user.

OCR App Screenshots

Google also offers a API for its map services. Using this API the location of an address can be determined and afterwards shown on an embedded map. In Protogrid, there only has to be a corresponding field in which the map will be displayed. Via ScriptLibrary, a listener for the address field is defined which queries the API and updates the embedded map when the address changes ("onchange" event).
Address on Google Maps
Of course, this functionality is not limited to Google Maps. Bing Maps and Openstreetmaps offer similar APIs, to name at least two alternatives.

Due to Javscript's popularity and its libraries, Protogrid can simply be extended by data and services from external sources. Whether you want to request stock prices live or whether you want to archive your Social Media messages, there are many possiblities to make use of Javscript within Protogrid.

Protogrid - One Platform, Lots of Applications

Sonja Blum on 2017-07-10
Protogrid is an very versatile platform. Due to many different field types and flexible relations, one can realize any thinkable type of application. In this blog post we show some examples, that are already developed with Protogrid.


Working Plan

A working plan defines, which person is doing what at which time and location. With Protogrid, this can be realized quite simple: You create a Proto for workers, locations and additional resources. Out of these one can easily create a working plan, which contains several views (per worker, per location, per resource, per time) that are available mobile and offline. If any changes will be needed in the future, this be achieved fast and easily.

Time Tracking

Depending on the working environment, it can be really helpful to be able to track working time everywhere even without internet connection. With Protogrid, this is straightforward: Create Protos for workers and working times and roll out your application to mobile devices. With own buttons and some lines of JavaScript you can create monthly invoices and other comfortable functions.

Acquisition of Information

Audit Reporting

Field workers need to create their audit reports based on some protocol, file them centralized and postprocess them. With Protogrid, all reports can be created in place and are filed systematically. Additionally, workers can not only access the protocols and client information, but any other relevant documents or informations.

 Bundesarchiv, Bild 183-24369-1980 /CC-BY-SA 3.0

Registration of Leads at a Fair or Road-Show

At a fair, your companys booth gets visited by many people. You talk, answer some questions, receive a business card and promise to call back. After the fair, all the gained data needs to be sorted and filed, hoping that everybody still knows, which visitor was interested in which products. With your tailor-made Protogrid App, you can collect and store all this data directly at the fair, link products and themes of interest and create a reminder to contact the visitor again. In the eveningat your hotel room, the newest leads are uploaded into the cloud and the back office can already spring into action.


Product Catalog

Especially field workers depend on a detailed catalog of all products that the company offers. Catalogs in PDF-format or even printed versions are quite bulky: Even for small changes, everybody needs to be informed and new material has to be provided, which can lead to larger effort. Thanks to the mobile and offline capabilities of Protogrid, this effort gets minimized: For each product you create a Card, which can be updated easily anytime. The new data is automatically synchronised with all the mobile devices, such that every worker gets the newest data instantly.

This is only a small list of possible applications. We would like to advise you about matching your individual requirements and propose a prototype!

Create a Selection Field in Protogrid

Sonja Blum on 2017-06-15

Drop down selection fields are one of the most comfortable components of forms because they allow to propose certain values to users or to restrict the input options. In the following I'll show you how to easily create a drop down selection field in Protogrid.

Drop Down Selection Field

We start from a simple application called "document storage", which contains the simple Proto "Document". This Proto currently defines a field for the name of the document and the possibility to attach files to documents. The Quickstart Tutorial leads you step by step through the creation of such an application. Now we also want to be able to choose a category for documents by selecting values in a drop down field.

Create the Proto "Category"

First we create a new Proto (see the Quickstart Tutorial chapter 8 for details): In the menu entry "Protos" we "Create" a new Proto, which gets the name "Category" and the plural "Categories". We save the Proto and add the necessary fields. To do this, in secion "fields and widgets" we create a field of typ "text-fiel-definition". In the opening card, we configure the new textfield and choose the label "category name" and the help text "enter the name of your category here". Since every category needs a name, this field is mandatory. Clicking "Save & Close" we leave the text-field-definition and get redirected to the category-Proto.

Create a Relation Field

Now we can insert our selection field into the existing Proto "Document". In the menu entry "Protos" we open the Proto "Document". In the section "field and widgets", we now add a new field of type "relation field definition". Now we add a name and a help text, we choose "Category" and "Enter the category of this document here". As "Related application" we choose the application we are working on, since the Proto we want to link (our Categories) are in this application. As "Related Proto" we choose "Proto:Category", our newly created Proto.
With "Save and Close" we end the creation of this field. Our drop down selection field is ready.

Relation of the Protos

Define Categories and Use the Field

Before we can upload Documents now, we need to define the selectable categories. Therefore we click in the menu entry "Categories" and create a new Card, where we define the name of the category. We choose "General" and "Save and Close" the Card. Create several such categories, to have a nice selection list (e.g. "Administration", "Emergencies", "Technical", "Sale").

Test the New Selection Field

After opening the overview "Documents", we create a new "Document" and notice the new field "Category". By clicking on this field, a list of all previously defined categories appears. There you can now choose the desired category either by clicking on it or by using typeahead.

Finished Card