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, ocr.space'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.

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 quick start tutorial chapter 8 for details): In the menu entry "Protos" we "Create" a new Proto, which is named "Category" and the plural "Categories". We save the Proto and add the necessary fields. To do this, in section "fields and widgets" we create a field of typ "text-field-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 for which 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 finish 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").
When creating a new document, we see the new field "Category". By clicking on this field, a list of all created categories appears. From now on, you can choose your prefered category.
Finished Card

Protogrid 1.3

Sonja Blum on 2017-03-22
The newest Version of Protogrid is here: Protogrid 1.3! The numerous new features allow you to add your own actions and elements and create more individual applications. See below for more details about those new features.

Highlights

  • CSV Import and Export: Unrestricted import and export of any data is now available. You can populate Protogrid with your own data without any efford. Data which was acquired in Protogrid can be archived or migrated to different plattforms easily.
    CSV Export
  • Blank Canvas Widget: Those widgets provide a blank space on your card which can be filled with any desirable content. You could for example add images or diagrams to increase productivity.
    Blank Canvas
  • Programmable Buttons: Create your own buttons with individual actions everywhere inside your application. The logic behind a button click can be freely defined in JavaScript. Protogrid provides you with the necessary boilerplate to get started.
    Programmable Buttons

Additional Features

  • Flexible Read and Write Permissions: Read and Write Permissions can now be defined for every individual Card, in addition to the Proto-wide settings that Protogrid offered before. Thus, sensitive data can be protected on a more fine-grained level or a detailed workflow can be realised.
  • JSON-API: The JSON-API was extended by new functions such as summing automatically over specified field values on cards or or accessing the contextual data for the current user.
  • Convenient Implementation of the Client-ScriptLibrarys: On creation of a new Client-ScriptLibrary, useful helper functions and explaining examples get loaded automatically.
  • Start Applications: All environments are now extended with Start Applications. Those apps give you a glimpse at the power of Protogrid and can be adjusted and applied with little effort. New Start Applications will be added regularly.
  • Time-Only-Fields: Now you can configure Date-Time-Fields to store and show only a time value. This is for instance useful, if you have to type in the same date several times otherwise.
Additionally, there are many improvments regarding stability, speed, visual optimizations as well as user friendlier error messages.
Find what's already planned at "Upcoming Enhancements". Can't find what you're looking for or do you have different priorities? Let us know and we'll get back to you as soon as possible!

It’s awesome. It’s free.

Protogrid is completely free for up to two users with any number of applications.