Retrieve Data by Scanning a Barcode

The barcode component supports manual entry or mobile device scanning of several major industry types of barcodes. The following how-to guide will explain how to use the barcode component with a barcode scanner and invoke a call to a REST API to retrieve information about the item.

Goal

This scenario demonstrates:

• How to use the barcode component on an interface.
• How to scan a barcode to populate data using supported mobile devices.
• How to use the an integration to retrieve information from a public API and use that data on an interface.

We will be testing this functionality by manually entering an ISBN number. To fully test barcode scanning functionality, you will need:

• An iOS or Android device with the Appian Mobile App installed.

Integration setup

The interface we'll be making requires a supporting rule that can query the Open Library Books API. Let's start by making an integration called ucGetBookInfoFromISBN.

In the integration designer add a rule input called:

• isbn (Text)

Setup the integration's connection with the following properties:

Add the following parameters to the integration:

This expression rule queries the Open Library Books API using the ISBN scanned into the barcode field by the barcode scanner. It then converts the returned JSON to a dictionary of properties using the a!fromJson() system function that we can display on our interface.

Testing this rule in the integration Designer with a valid ISBN, 0345391802, should show an output that looks similar to this:

Creating an interface for barcode scanning

Now that we've created the supporting rule, let's move on to the interface with the barcode field. Create an interface called ucLookupBarcode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
=a!localVariables(
  local!bookIsbn,
  local!bookInfo: if(
    isnull(local!bookIsbn),
    null,
    /*This integration calls the Open Library Books API, this could be switched out*/
    /*for an integration that calls a different API or queries a database based on*/
    /*your use case.*/
    a!fromJson(rule!ucGetBookInfoFromISBN(local!bookIsbn).result.body)[local!bookIsbn]
  ),
  a!formLayout(
    titleBar: "Book Details",
    contents: {
      a!barcodeField(
        label: "Book ISBN",
        instructions: "Scan the UPC of a book",
        acceptedTypes: {"UPCA","UPCE"},
        value: local!bookIsbn,
        saveInto: local!bookIsbn
      ),
      a!textField(
        value: "No Book Found",
        readOnly: true,
        showWhen: and( not(isnull(local!bookIsbn)), isnull(local!bookInfo) )
      ),
      a!sectionLayout(
        label:"Book Details",
        contents: {
          a!columnsLayout(
            columns:{
              a!columnLayout(
                contents:{
                  a!textField(
                    label: "Title",
                    labelPosition: "ADJACENT",
                    value:  local!bookInfo.details.title ,
                    readOnly: true
                  ),
                  a!textField(
                    label: "Publisher",
                    labelPosition: "ADJACENT",
                    value:  local!bookInfo.details.publishers ,
                    readOnly: true
                  )
                }
              ),
              a!columnLayout(
                contents:{
                  a!imageField(
                    images: a!webImage(
                      source: local!bookInfo.thumbnail_url,
                      link: a!safeLink(
                        uri: local!bookInfo.info_url
                      )
                    ),
                    size: "MEDIUM"
                  )
                },
                showWhen:not(isnull(local!bookInfo.thumbnail_url))
              )
            }
          )
        },
        showWhen: and( not(isnull(local!bookIsbn)), not(isnull(local!bookInfo)))
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Close",
          style: "SOLID",
          submit: true
        )
      }
    )
  )
)

Creating the process model and application action

In order to test barcode scanning on a mobile device, we need to create an action that uses our interface:

1. In the interface object's properties dropdown, select Save as….
2. Choose Application Action.
3. Give the Action a name, description, and choose the appropriate Process model folder.
4. Click Save & Edit.

This will create a process model with this interface as a start form along with an application action. As long as the logged in user of the mobile device has permission to see this action, they can test this expression out on a mobile device

Testing the barcode scanner

You can now navigate to your action using either the iOS or Android version of the Appian Mobile application.

1. Tap the barcode icon.
2. Use the mobile device's native camera to scan a barcode on a book.
   • The barcode's information appears in the barcode field, and an additional section appears with the book's information that was received from our call to the Open Library Books API:

Notable implementation details

• This example shows how to call a specific API using and integration. However, querying a database or another API based on the scanned barcode can be done easily by replacing the rule that was used in the a!save() function in the a!barcodeField().

Feedback