Warning!

You’re now reading a legacy document. The features described below are only usable within the classic generation environment.

Do you need an application template with the same or similar functionality? Follow this link to leave a request!

After reading this article you’ll know:

Functionality and main features of the Document processing template
Basic steps on how to create and configure this template
How to add new documents and edit their details
Some tips on visual stylizing for your application

Description

This template is meant for extracting information from the uploaded documents. It uses the Kippa API for extracting data. Then it is sent over to the Betty Blocks application that stores this data. All the extracted information becomes editable within the application.

Main features

Create new document

Creating a new document within this template enables you to upload the needed file into the Betty Blocks application. Then in turn is sent to the Klippa service to be processed for dragging out data. Besides uploading a new document itself, while creating a new document record, you have to fill in the additional information:

Order number
Date
Cost center
Type of document (Invoice / Order)

The file formats supported by the Klippa API are TXT, JPG, PNG, PDF and others.

View and edit document details

Once a document has been created and processed, users will be able to view and edit its information. Document details are divided into two tabs view:

Main information: order/invoice, customer, merchant, payment
Order lines (showing various product details depending on a document’s details)

Note: Main information sub-tabs will be described in the ‘Editing document’ section.

Download document

After a document was uploaded and processed in the application, you can always download the initial file on the document details page.

Document statuses and labels

At different stages of processing documents they will have different statuses:

Processing. The initial document has been uploaded to the application and is being processed by it.
Ready for review: The processing has been accomplished and now the document record is ready to be reviewed by the application’s administrator.
Done: The document has been checked and submitted by the administrator.

Any document record might have its own label that could be set manually. For example, ‘Todo’ might serve as a signal that it should be reviewed. A sorting by labels and statuses on the home page will help users find needed records.

Pages overview

This section describes the pages you can access via the page builder.

Create new document. The page to upload a new document, identify its type and fill in other details.
Document details. On this page, you can view the details of a single document.
Home. The home page displays all existing documents with filtering by label and status.
My Account. The page to edit your personal information and update your password.
User Login - Login. The start page of your application via which registered users can log in using their credentials.
User Login - Password Reset Request. Using this page you can request to reset your password; a special link will be sent to your email address.
User Login - Reset Password. The page with reset password form; here users can create a new password.

Getting started with Document processing application template

Creating the application

Open My Betty Blocks and see your dashboard with suggested application templates in the ‘Start building’ section. Choose ‘View all templates’, then find the Document processing template and click ‘Use template’.

Note: If you want to see the template’s live preview, click on its thumbnail, and in an open window find the ‘Live preview’ button.

The next steps will include coming up with a name for your application and setting a value for the application ID configuration. Find out why you need this setting and how to configure it properly in the Introduction to application templates article.

Klippa API configuration

The following configuration we need to set is Klippa API Key as this application works together with it to read and process the documents that are animated. This way they are transcripted in your application.

Сlick on ‘klippa_api_key’ (1) and in a slide-out panel on the right find the ‘Edit’ (2) button.

In the configuration section, you have to paste a special API key you retrieved from Klippa. Go to their official website page in order to request this key.

Paste your API key to the Value field and click on ‘Save’.

Creating webuser

Let’s continue preconfiguring your application. Now we need to create the first webuser in order to be able to login into the application.

Open the back office > Settings tab > Webusers. Click on the ‘New’ button and in a slide-out panel on the right fill in the webuser’s information. Choose their role (e.g. admin) and click on ‘Save’ in the top right corner.

After this procedure is done, you will be able to log in to the application’s front-end using the webuser’s credentials.

Using the template

After you log in to your application, the home page will look like this. There are no uploaded documents yet, but we will create one in the next section.

Creating new document

Let’s take a look at how to create a new document with this application.

First, click on the ‘Create new document’ button in the top right corner.

The new ‘Create record’ page will open. Here you will have to fill in the order number, date, and cost center. Then choose the type of document (in our case, it’s an order), then browse the file to pick up the one you need. After you’ve created the document, it will appear on your home page and it will have the status ‘Processing’. It takes some time for the application to analyze and ‘transcribe’ the file’s details. Then they will become visible within the document record.

Editing document

Now as our document was processed, it will have the status ‘Ready for review’. It means now it needs to be reviewed by the administrator, for example.

To edit our newly created document, click on the ‘>’ icon on the right.

You will be redirected to the document detail page. On the top of it, there are two tabs you can switch between: main information and order lines (1). At the same time, the main information tab will have four sub-tabs with some information about our order (2):

Order/invoice gives general information about the document some of which we’ve already pre-filled. Two fields “Invoice type” and “Invoice number” still need to be completed for our document, but they might have been filled automatically in case of using another document.
Customer tab holds customer details: name, number, address, city, street name, house number and zip code.
Merchant tab provides you with information about a person who sent you the invoice: their name, VAT number and language.
Payment tab gives information about the currency and amount of payment, purchase time and date; payment method and receipt number.

On the page’s bottom, you will see the four buttons that help manage documents in this application (3):

Document labels give you the possibility to mark your documents in some specific way. Later you will be able to sort these documents by labels on the application’s home page.
Download document enables you to download the initial document to your device.
Complete document is used to change the status of the document to ‘Done’, so that all users will be able to see that it doesn’t need to be reviewed or edited.
Update button will save your progress with the document. You will see the success message once it is done.

Changing profile details and password

After you’ve logged in, it’s possible to change your user’s details at any time by clicking on ‘My account’ on the navigation bar.

There are two tabs here. Profile details tab (1) is opened by default. Here you can change your first and last name and email address. It’s also possible to set or change the profile image that will be displayed in your application.

After you’ve finished editing your profile details, save changes.

A new tab will open as you click on ‘Update password’ (2). Here you can change your password. Type in your current password and the new one twice. Don’t forget to click ‘Update password’ when you finish.

Note: Toggle visibility by clicking on the eye symbol to be able to see the passwords you’re putting down.

Resetting password

In this section, we will describe actions you should undertake in case you forgot your password. The procedure of resetting passwords within the Login flow application is as simple as possible. First, find the ‘I forgot my password’ option on the login page and click on it.

You’ll see an empty field where you must enter the email address you used to create your account in this application (1). Click ‘Send me a recovery link’ and it will be automatically sent to your email address. All you have to do is open the corresponding email from Betty Blocks and follow the link. The ‘Reset password’ page will open (2). Type in the new password, confirm it, and click ‘Set new password’.

Returning to home page

The ‘Home’ button will redirect the logged in users to their homepage with the documents overview.

Logging out

If you need to change a profile or just don’t want to stay in the system, you can use the ‘Log out’ option. After clicking on it, you will come back to the login page.

Template stylization

Replacing logo

To make sure your Login flow application looks in line with your product’s visual design, you might want to apply some changes. First of all, you can add your logo to the header.

Go to the page builder of your application and choose the home page.

Then click on an empty field of the navigation bar (1). You will notice that it’s a partial that is being reused on My Account page as well. Click on ‘Edit partial’ in the menu on the right (2).

Choose the logo media component (1) and replace the existing link with a link to your company’s logo.

More information on adding a logo to a page and working with a navigation bar can be found here.

Customization via theme builder

It is also possible to change your page style via the theme builder. You can find it in the tools section.

Here you can pick up the most suitable color scheme for your application.

Also, it’s possible to configure your typography. Choose the fonts for the page titles and body text.

After you’ve finished customizing, don’t forget to click ‘Save and apply’.

Customizing your application could be really fun, whether you already have some references or want to do everything from scratch. Play around with styles and find the one you enjoy. More information about the theme builder is available here.

Back office grids

What’s new? Current-gen vs classic