ACCOUNTS PAYABLE INVOICE PROCESSING WORKFLOW APPLICATION

Learn How To WAG™ 1

ACCOUNTS PAYABLE INVOICE PROCESSING

WORKFLOW APPLICATION

© SOFTWARE PROGRESSIONS CORPORATION WALNUT CREEK, CALIFORNIA

2013


- STEP 1. GETTING STARTED WITH WAG™ 5

- STEP 2. CREATING A NEW APPLICATION 6

- CREATNIG A TEXT FIELD 8

- CREATING LIST FIELD 14

- CREATING VIEWS 20

- CREATING A NEW FORM 36

- USING FORMULA BUILDER 39

- CREATING THE STANDARD SECTION 44

- CREATING SUBFORM 58

- CREATING QUERY LIST 61

- CREATING DATAGRID SUBFORM 71

- CREATING A COMBO BOX 84

- CREATING A BUTTON 105

- CREATING A NEW TAB 115

- CREATING NEW COLUMN 140

- USER MODE 187

Learn How To WAG™ 3 Overview

With WAG™ everyone can create custom mobile and web apps and run them for large scale

audiences – free of charge.

The types of apps that can be created with WAG™ include: Consumer, Business, Government

(including GovCloud), Healthcare, Education, Non-Profits and many other verticals.

An app that takes several programmers one year to develop, takes a few days to create using

WAG™ - without requiring programming experience.

WAG™ is unlike any other product on the market. WAG™ empowers people to do things that

they just can't do today. We call this democratizing application development™.

Create your app once - and it runs on all the major desktop browsers and all the major

mobile devices as a native app on, just the way Facebook can be accessed via a web browser

and via a native mobile app.


Objective

In this document we take a look at an Accounts Payable Invoice Processing Workflow

Application. If you’re interested in creating corporate workflow apps with backend

integration, you this document will guide you Step by Step.Variations of this app are very

popular with our large corporate customers.

Before we begin, we will need to identify just what will go into our Accounts Payable Invoice

Processing workflow app. A quick glance at Wikipedia states:

“Once the invoice arrives the clerk classifies and sorts the invoice into

various categories.

The invoice is forwarded to the responsible person for that particular

invoice. This is normally the person who has placed that order. If there

has been a purchase order involved when placing that order, the invoice

must then be matched against the purchase order to ensure that the

amount invoiced is correctly stated on the invoice. If the amount is right

and the goods have arrived, the responsible person will have to approve

the invoice by signing off on it.

If the amount invoiced exceeds a certain amount that is limited by the

organization, the superior of that person may have to approve the

invoice as well. Once the invoice has been approved and there have

been no variances, the invoice is posted into the accounting system.”

This breaks down into our workflow:

1. Invoice is entered and forwarded to an approver.

2. The approver examines the invoice and gives it his/her approval.

3. Manager reviews the invoice. He assigns it to an accountant.

4. Accounting organizes payment.

Visit http://www.youtube.com/WebAppGenerator

WAG™ Web App Generator allows you to create mobile and web apps that run on all

major devices.

http://www.youtube.com/WebAppGenerator


Step 1. Getting Started With WAG™

Create an Account

1. Go to www.webappgenerator.com

2. Click the Signup—It’s FREE button.

3. Fill out the Form with your information and click Signup.

4. Check your email account. You should receive an email message with a

link to activate your subscription (if you don’t see the email, check your

spam folder).

Once you’ve activated your subscription, return to

webappgenerator.com and click Sign In.

Creating Application Named Accounting


Step 2. Creating a New Application

Now you are ready to create your new application

1. Click Add New Application

2. In the above screen, enter your Application Name in this case

Accounting

3. Click Create Application to continue.

We will use this application as the reference for our main, Accounts Payable Invoice

Processing workflow application.

Create New Form Named Approver


1. Click on Add New Form in the Design Mode

Name the new Form

2. Click in the Name field and type Approver

3. Click Save


Create Text Field named Name

Drag and drop a text field from the Toolbox in the Approver Section


Name the Text Field

1. In the Properties Box click the Field Name and type “Name”

2. Click Save.


Create Text Field Named Email

Drag and drop a text field beneath the Name Text field


Name the Text Field

1. In the Properties Box click the Field Name and type Email

2. Click Save.


Create Number Field Named Threshold

Drag and drop a Number field from the Toolbox beneath the Text field named

Email


Name the Number Field

1. In the Properties Box click the Field Name and type Threshold

2. Click Save.


Create List Field Named Department

Drag and drop a List field from the Toolbox beneath the number field named

Threshold


Name the Text Field and enter List Values

1. In the Properties Box click the Field Name and type

Department

2. Enter the following values under the List Value:

Accounting, Acquisitions, budgeting, Capital, Finance,

Insurance, Legal, Processing, Real Estate, Research, Taxes.

3. Click Save.

4. Click Close

5. Click Views


Create New Form Named Currency

1. Click Add a New Form

2. Type Currency in the Name Field.


Create three text fields and Name them as Currency Code, Country and Description

Drag and drop three text fields from the Toolbox.

1. Click on Field Name in the Properties Box and type Currency Code, Country and

Description for each text field.

2. Red Asterisks mean the field is required, Check the box next to require in the

properties box.

3. Click Save each time you name the text field.


Create a New Form Named Vendor

1) Click Add New Form

2) Type Vendor in the vendor name and Click Save.


Create six texts fields and Name them as shown on the screenshot.

Drag And Drop six texts Fields from the toolbox on the Vendor Section.

1. Name the Fields as: Vendor Company Name, First Name, Last Name, Email, Address,

City State, and Phone Number.

2. Those fields that have red Asterisk * are required, check the box next to Required in

the Properties Box for the fields shown on the screen.

3. Click Save after naming each field


Creating Views

1. Click on Add New View

Key point

Views are to show or hide records, make them searchable, organize them in a certain order

or to enter values. After you create all the Views in Design Mode you will immediately be

able to try your application as a user.


Name the view

1. Type Approvers in the View Name

2. Check the boxes along the Name, Email, Threshold,

Department as shown on the screen

3. Click Save


Add view for Currency Form.

1. Click on Add a New View


Name the new view.

2. Type Currency in the View Name

3. Chose Currency from the drop down list next to forms

4. Check the boxes as shown on the screenshot for Currency code, country and

description.


Create View For Vendors

Click Add New View


Name the New View

1. Type Vendors in the View Name

2. Check all the boxes next to: Vendor Company Name, First Name, Last Name, Email,

Address, City State, Phone Number

Click Save


Creating Vendors

1. In the User Mode Click on New

2. Choose Vendor from the drop down List


Enter the following information:

1. Click Save

Vendor

Company

Name:

First

Name:

Last

Name:

Email: Address: City State Phone

Number:

ABC

Consulting

Mike

Young

[email protected]

2157 N

California

Blvd

Walnut

Creek

9258914356


Keep entering other Vendors; you can use the data from the Table below.

First

Name

Last

Name

Email Address City State Phone

Number

Vendor

Company

Name

Shira Solem shirasolem@

gmail.com

138 Gerald L

Bates Drive

New

York, NY

(346)259-

9144

Shira Y

Michael Muma mmuma@

gmail.com

7638 Brenan

dr.

El Paso,

Tx

(280)3112681 ElinTN

Elin Everest eeverest@

gmail.com

12341 Ashford

place

Memphis

TN

(809)688227

2

Gerald

Tania Troano ttroano@gm

ail.com

433 Coburn

hollow L

Boston,

MA

(139)340-

5225

YoungHol

mailto:[email protected]









Adding Approvers

1. Click on User Mode

2. Click New

3. Click Approver from the drop down list

Enter the following information: Name: Alexa Tobias, Email:

[email protected], Threshold: 1 000 000, Department: Choose

Accounting from the drop down list.



This is what it looks like in the Approvers list

Similarly add other approvers using data from the table


Name Email Threshold Department

Amari Rocha [email protected] 1000000 Accounting

Ashley Mcadams [email protected] 1000000 Taxes

Catherine

Burroughs

[email protected] 1000000 Finance

Caira yeager [email protected] 500 Insurance

Ciara crum [email protected] 5000 Legal

This is what your Approvers list should look like







Adding Currencies

1. In the User Mode go to New Currency:

2. In this New Currency view, add following:

Currency Code:

Country: Description

USD United States United States Dollar.


3. Click Save.

Keep creating Currencies; enter the following data as shown in the Table below.

Currency Code Country Description

USD United State United States Dollar

CAD Canada Canadian Dollar

CNY China Chinese Yuan

BRL Brazil Brazilian Real


1. Click Design

2. click Applications,

3. Click Accounts Payable Invoice Processing Workflow Application.


4. Click Create a New Application

Name the New Application

This is our main Application named Accounts Payable Invoice Processing workflow app.

Following slides will demonstrate how to create it.


Creating a New Form

Design Mode

Key Point

Design Mode is where you to create your app.

2. Click Add a New Form.

3. Name this form “Invoice” and Click Save.


Creating a Text field named Invoice Number

Drag and drop a Text Field from the Toolbox into the Invoice Section.


Name the Text Field

1. In the Properties box type Invoice Number In the Field Name

2. Check the Required box.

3. Click Save.


Creating the date field Named Payment Due Date

1. Drag and drop a Date Field from the toolbox beneath the Invoice

Number Text Field.

2. In the Properties box type Payment Due Date next to the Field Name

3. Click Save.


Creating a Combo box field named Currency.

The invoice will specify the currency the vendor desires to be paid in. This field will reflect

that.

Drag and drop a Combo Box field into our form.

This form will draw from another WAG app called Accounting The following slides will

demonstrate building of the Accounting app that will have a list of different currencies

and approvers.

Key Point

Combo boxes allow you to view and search through an object’s data to ultimately choose a single

record.


Naming the Combo Box

1. Click in the Field Name in the Properties box and type Currency.

2. From the System drop down list choose Accounts Payable Invoice Processing.

3. Select Currency from the Type dropdown menu.

4. Check all fields you want to show for the Currency Code mark the search field and set

the display order 2,1,3 as shown in the screen and click Save


Rename the Tab Invoice to Invoice Submission Info

1. In the Properties Box click in Tab Name and Type Invoice

Submission info

2. Click Save


Rename Column Named Invoice to Invoice Details.

1. In the Properties Box Click in Column Name and type

Invoice Details

2. Click Save.


Creating the Standard Section Named Vendor Info

Drag and drop a new Standard Section from the Toolbox


Name the Standard Section

1. In the Properties Box click in Section Name and type “Vendor Info”

2. Click Save


Create Combo Box Named Vendor

Drag and drop a combo box In the Vendor Info Section.


Name the

Combo Box

1. In the Properties box

click in the Field Name and type

Vendor

2. Check the box next to

Required

3. Select Accounting

from the System dropdown.

4. Select Vendor from

the Type dropdown.

1. Check the Address,

City State, Email, First Name, Last

Name and Phone Number fields.

2. Select Vendor

Company Name a as the Search

Field.

3. Number the fields in

Display Order in the order shown

on the screen

4. Select Vendor

Company Name a as the Display

Column

5. Click Save.


Create text field Named Vendor Name

We want our app to show the vendor’s information in an expanded form once a user has

selected a vendor. For this we will use several text fields and populate them with vendor

information.

1. Drag and drop a text field into the vendor info form.

2. Name this text field Vendor Contact

3. Check Calculated

4. Click on Formula Builder.


5. Enter this formula:

[Vendor].[Last Name] + ‘ , ‘ + [Vendor].[First Name]

6. Click Ok

7. Click Save.


Create text field Named Vendor Address

1. Drag and drop a text field into the form.

2. Name this field ‘Vendor Address’

3. Check Calculated


Key Point

The purpose of the formulas we use are to create a set of instructions that your application will use to

perform specific operations or to exhibit desired behaviors. Formulas are there and ready for you to

use. You will only need to check the boxes next to the desired in the Properties Box, on the left hand

side of your screen.



[Vendor].[Address]

6. Click OK

7. Click Save.


Create text field named City and State


2. Name this field City and State

3. Check Calculated




[Vendor].[City State]

6. Click OK

7. Click Save.


Create text field named Vendor Email


2. Name this field Vendor Email

3. Check Calculated



5. Enter the formula:

[Vendor].[Email]

6. Click Save.


Create a text field named Vendor Phone


2. Name this field Vendor Phone

3. Check Calculated




[Vendor].[Phone Number]

6. Click Save.


Creating Subform Named Items

1. Click Add a New Form

2. Name this new Form Items


Create text Field Called Item Description

1. Drag and drop a Text Field into the form.

2. In the Properties Box click on field name and type Item Description

3. Click Save.


Create Number field named Item Cost-

Drag a Number Field from the Toolbox into the form.

1. In the Properties Box click on field name and type Item Cost

2. Select Number e.g. 2,010.00 from the Field Format dropdown.

3. Click Save.


Create Query List Field Named Account

Drag and drop a Query List Field into the form


Name the Query List

1. Name this field Account.

2. Enter the SQL Query that retrieves the names of accounts from our accounting

system. In your case this query will be different. Consult your Accounting software

manual.

3. Enter the Connection string necessary to connect to the database server.

4. Importantly, we will check the “Run at end point” option and select “Default” from the

list. This will cause the query to run from our locally installed Secure EndPoint which is

in the same network as the database server. Our app running from the Cloud will use

this secure connection to run the query and present the results to the user in real

time. This type of connection is just as secure and up to 100x faster competed to VPN

type connections so our results will be presented to the user very quickly.

5. We will then set the “Identity Value” to “acct_code” which is the key field that is

returned from the query. This will vary in your case.

6. The “Search Column” and “Display Column” fields will be set to “acct_desc” which is

the name of the account from the chart of accounts in our accounting system. This

field will also vary in your case. Paste this query into the SQL Statement box.

7. You will also need to include a connection string that provides server connection

information.

Key point

Make Sure to Download the Corporate Central Secure Endpoint from the downloads section at

CorporateCentral.com to establish secure connection between your WAG app and your local area

network.



Create List Field Named Expense Type

1. In the Properties Box click on Field Name and type Expense

Type

2. Under List Values Enter: Corporate -Dept./Office and Trust

3. Click Save


Create Query list Named Item Region.

Drag and drop a Query List Field into the form


Name the Query List as shown on the screenshot on the next page

1. Name this field as Item Region

2. Enter the SQL Query that retrieves the names of Regions from our accounting system.

In your case this query will be different. Consult your Accounting software manual.








5. We will then set the Identity Value, Search Column and Display Column as Region

which is the key field that is returned from the query. This will vary in your case. It is

the name of the account from the chart of accounts in our accounting system. This

field will also vary in your case. Paste this query into the SQL Statement box.


information.

7. Our form will contain three Query Lists: Expense Type, Item Region and Item

Department.

8. If the Expense Type is a specific brand – such as “Corporate Office” we have to option

to display to other forms to further categorize each item.

9. This is accomplished by changing the Visibility control on Item Region and Item

Department to be dependent on the choice in Expense Type.

10. Click Item Region in the form

11. Check Visibility Control

12. Click Formula Builder


[Expense Type]==’Corporate -Dept. /Office’

14. Click Save



Create Query List Named Item Department.

Drag and Drop a query list field form the toolbox beneath the Account field.


Name the Query list as shown on the screenshot of the next page.

1. Name this field as Item Department

2. Enter the SQL Query that retrieves the names of Regions from our accounting system.

In your case this query will be different. Consult your Accounting software manual.








5. We will then set the Identity Value, Search Column and Display Column as

Department which is the key field that is returned from the query. This will vary in your

case. It is the name of the account from the chart of accounts in our accounting

system. This field will also vary in your case. Paste this query into the SQL Statement

box.


information.

7. Our form will contain three Query Lists: Expense Type, Item Region and Item

Department.

8. If the Expense Type is a specific brand – such as “Corporate Office” we have to option

to display to other forms to further categorize each item.

9. This is accomplished by changing the Visibility control on Item Region and Item

Department to be dependent on the choice in Expense Type.

10. Click Item Region in the form




[Expense Type]==’Corporate – Dept./Office’

14. Click Save

15. Click Close.

16. Click Invoice



Create DataGrid Subform named Items

Finishing the Subform

1. Click on “Forms”

2. Click on “Invoice”

3. Drag a DataGrid-Subform from the Toolbox. Drop it beneath the

4. Invoice Section.


Name the

DataGrid Subform

1. In the Properties Box

Click in Section Name

and type Items

2. Check Allow Add New

Records

3. Select Items from the

Type dropdown menu.

4. Check “Account”,

“Expense Type”, “Item

Cost”, and “Item

Description,

5. Give Account a

Display Order as shown

on the screenshot

6. Check

Show Total

next to Item

Cost

7. Click Add


Create a Number field named Invoice Total

Drag and drop a Number field from the Toolbox into the Line Items subform


Name the Number field

1. In the Properties box click on field Name and type “Invoice Total”

2. Field Format should be currency

3. Check Calculated


4. Click Formula Builder and enter the following formula:

[Line Items].Total[Item Cost]

5. Click Save


Adding a Processing Section

Our application will have several different people working with it. In order to better organize

workflow, we will use several text fields that will contain flags concerning which stage an

invoice is in. Because these flags do not directly pertain to the invoice itself, they will be

hidden. Only our buttons and internal logic will examine them.


Create new Section Called Processing

Drag and drop a Standard Section into our form.

1. Name this section “Processing

2. Check Visibility Control. Make sure the box underneath it says, false


Create Text Field Named Email Body

Drag and drop a text field into the Processing Section.


Name the text field

Email Body

During the course of invoice processing we will email people regarding details about the

invoice. We will use a text field to set up this email automatically without users having to

worry about constructing each email.

1. Name this field “Email Body”

2. Check Calculated


'There is an invoice from ' + [Vendor contact] + ' for ' + [Currency] + ' '

+ [Invoice Total] + '.'

4. Click Save.


Create text Fields Called Invoice Entered, Project Manager, department approver

reviews, invoice approved

Flags

Our app will use some logic to determine which fields to show a user. The following fields will

hold data regarding what has happened so far in the invoice processing.

1. Drag and drop a Text field into the Processing Section.

2. Name this field “Invoice Approved” Click Save.


4. Name this field “Invoice Entered” and Click Save.


6. Name this field “Project Manager Reviewed” and Click Save.



8. Name this field “Department Approver Reviewed” and Click Save.

Rename the Column Invoice to Invoice Details

1. Om the properties box click in Column Name and Type Invoice

Details

2. In the Column width type 50%

3. Click Save


Create New Column Named Administration

1. Drag and drop a new column from the Tabs/Column Section of the

Toolbox.

2. In the Properties Box click on Column Name and type Administration.

3. Click Save


Create a new Section named Project Manager.

Creating the Manager Section

4. Drag and drop a new Section into the Form.

5. In the Properties Box click on Section Name and type Project Manager

Info.

6. Click Save.

\\\


Create a combo box named Project Manager

1. Drag and drop a Combo Box into the Project Manager section.

2. In the Properties Box click on Field Name and type Project Manager

We will populate this combo box by utilizing the contact data already stored in Total

Relationship Management™. Your application could use TRM, another WAG app or even a

Query List.


Name the Combo Box.

1. Select TRM from the System dropdown

menu.

2. Select your company from the VE

dropdown menu.

3. Select Contact from the Object

dropdown menu.

4. Check the fields “Full Name (Last First)”,

Department, Email Address, Office and

Region.

5. Select Search Field next to Full Name.

6. Give Full Name a Display Order of 10.

7. Give Email a Display Order of 20.

8. Give Department a Display Order of

30.

9. Give Office a Display Order of 40.

10. Give Region a Display Order of 50.

11. Click Save.


Create a text Field Named Name

Finishing the Project Manager Section

1. Drag and drop a Text Field from the Toolbox into our Form.

2. Name this field “Name“.


Name the Text Field

3. Check Calculated.

4. Check Formula Builder.

5. Enter the following formula:

[Project Manager].[Full Name (Last First)]


Create a text Field Named Email

1. Drag and drop a Text Field into our Form.

2. Name this field Email.




[Project Manager].[Email Address]


Create a text Field Named Department

Drag and drop a Text Field into our Form.


Name the text field

1. Name this field “Department“.




[Project Manager].[Department]


Create a text Field Named Office



Name the text field

1. Name this field “Office“.




[Project Manager].[Office]


Create a text Field Named Region



Name the Text field

1. Name this field “Region“.




[Project Manager].[Region]


Create New Section Named Department Approver

Drag and drop a Standard Section into the form from the Toolbox.


Name the New Section

1. In the Properties box click in Section name and type Department Approver

2. Click Save


Create A Combo Box Named Approver Name

Drag and drop a Combo Box into this section from the Toolbox.


Name the Combo Box

1. Name this combo box “Approver

Name”

This box will take information from

another WAG app that contains

Departments and their associated

approvers. We will only want to select

from approvers who are in the same

department as the Project Manager and

whose approval thresholds are above

the invoice total. This bit of logic is

simple to implement.

2. Click “Set Filter” underneath

Department.

3. Select “=” from the dropdown menu

4. Select Department from the

dropdown menu beneath the

previous.

5. Click “Set Filter” underneath

Threshold

6. Select “>=”

7. Select “Invoice Total” from the

dropdown menu.

8. Click Add


Create a Text Field Named Approver Email.

1. Drag and drop a text field into this section.

2. Name this field Approver Email

3. Check Calculated


5. Enter the following Formula:

[Approver Name].[Email]


Create A Number Field Named Approver Threshold

1. Drag and drop a Number field into this section.

2. Name this field Approver Threshold

3. Check Calculated



[Approver Name].[Threshold]


Create A Document Management Section Named Documents

Adding a Documents Section

If our users want to include a PDF or image of the original invoice, we can add that by

including a Document Management section in our application.

1. Drag and drop a Document Management Section into our form from

the Toolbox.


Name the Section

1. Name this section Documents

2. Make sure that Document, Image, Compressed, Video, Audio

and PDF File are checked.

3. Click Save.


Create A Section Named Submission

1. Drag and drop a Standard section into our form.

2. Name this section Submission

3. Click Save


Create a Date Field Named Date Submitted

1. Drag and drop a Date field into this section.

2. Name this field Date Submitted


Create a Button Named Submit to Project Manager

Drag and drop a Button field into this section from the Toolbox.


Name the Button

1. Name this button “Submit to Project Manager.”

We won’t want this button to appear after the form has been sent to the manager.

We will change the Visibility Control:

2. Check the Visibility Control


[Invoice Entered]==’’

Thus, only while the Invoice Entered flag is empty will the submit button be visible.


We want this button to save our invoice, flag it as entered and email it to the

project manager. The following screens will how to do this

1. Click on Event in the Properties tab.

2. Click “Add New Event”


1. Select “Set Value” from the Action dropdown menu

2. Select “Invoice Entered” from the Field dropdown menu.

3. Enter ‘Yes’ in the Value formula box.

4. Click Save.


Click “Add New Event”


1. Select “Save & Email” from the Action dropdown menu.

2. Type [Email] in the Email To field

3. Type New Invoice in the Subject text field.

4. Click Field next to Body

5. Select Email Body from the dropdown menu beneath Body.

6. Check Include link to record.


Create Button named Submit to Department Approver

This button will save our invoice, flag it as entered and email it to the project

manager.

Drag and drop a Button field into this section


Name the button

1. In the Properties Box click in Field Name and Type Submit to Department

Approver.

2. Check the Visibility Control and put the following formula:

[Invoice Entered]!='' && [Project Manager Reviewed] == ''

3. Click Save


Forming the Button

1. Name this button Submit to Department Approver.

2. Click on Event in the Properties tab.

3. Click Add New Event

4. Select Set Value from the Action dropdown menu.

5. Select Invoice Manager Reviewed from the Field dropdown menu.

6. Click Formula Builder and enter the following formula: ‘Yes’

7. Click Save



9. Select Save & Email from the Action dropdown menu.

10. Click Add Fields next to the Email To formula box.

11. Select [Approver Email] from the list.

12. Type New Invoice into the Subject text box.

13. Type A new invoice is awaiting your approval into the Body text box.

14. Check Include link to record

15. Click Save


Create a new Tab Named Invoice Processing

Drag and drop a new tab from the toolbox next to the Invoice Submission Info tab.


Name the new tab.

1) Click in the Tab Name and type Invoice Processing.

2) Check Visibility control, click on formula builder and put the

following formula:

[Project Manager Reviewed]!=’’

Thus, only when the Invoice is reviewed by project manager will the Invoice

Processing tab be visible.


Rename the Tab Column On to Column

1. Click on Tab Column 1

2. In the Properties Box click in Column Name and type

Column.

3. Click Save.


Create a New Section Named Assign

Drag and drop a Standard section from the Toolbox into this tab


Name the Section

1. Click in Section Name and type Assign

2. Click Save.


Create A Combo Box Named Assigned to

Drag and drop a Combo box field into the Assign section.


Name the Combo Box.

1. Name this field Assigned To

This combo box will draw information from

our Total Relationship Management

System. Details about this system are

available on corporatecentral.com. Your

combo box can use information from

another WAG app, a database or a list you

create yourself.

2. Select “TRM” from the System

dropdown menu.

3. Select your company from the VE

dropdown menu

4. Select “Contact” from the Object

dropdown menu.

5. Set the Display Column to “Full Name

(Last First)”

6. Select the fields Email, Full Name (Last

First), First Name, Last Name, and

Department.

7. Select the button next to Full Name

(Last First) and give it a Display Order

of 10.

8. Give Last Name a Display Order of 2.

9. Give First Name a Display Order of 3.

10. Give Email a Display Order of 4.

11. Give Department a Display Order of 5.

12. Click Save.


Create a New text Field Named Assigned Email

1. Drag and drop a Text field into the Assign section.

2. Name this field Assigned To Email


4. Click Formula Builder and enter this formula:

[Assigned To].[Email Address]

5. Click Add

6. Click Save


Create a Text Field Named Assigned Date

Drag and drop a Text field into the Assign section.

1. In the properties box click in Field Name and type Assigned Date

2. Click Save.


Name the Text Field

4. In the Properties Box click in the Field Name and type Assigned Date

5. Click Save.


Create Button Field Named Assign

Drag and drop a Button field into the Assign section.

1. In the properties box click in Field Name and type Assign

2. Click Save.


Name the Button Field.

1. Click on the Events.

2. Click Add New Event.


Making the button assign date

1. Select Set Value from the Action dropdown menu.

2. Select “Assigned Date” from the field dropdown menu.

3. Click Formula Builder next to the Value text box.

4. Enter the following formula: Today()

5. Click Add.

6. Click Save.


Rename the Tab Column 1 into Column

1. Click on the Tab Column 1

2. Click In the Column name in the properties Box

3. Click Save


Making the button send E-mail on click.


2. Select Save & Email from the Action dropdown menu.

3. Click “Add Fields” next to the Email To textbox.

4. Select Assigned To Email

5. Click OK

6. Type New invoice in the Subject text box.

7. Type A new invoice has been assigned to you’in the Body text box.


9. Click Save.


Create New Section Named Approval

Approval Section

Having made a section by which the invoice can be assigned to an accountant, we will now

make the sections that the accountant will use to process the invoice.

Drag and drop a Standard section into the form.


Name the new Section

1. In the properties box click on Section Name and type Approval

2. Since we only want this section to be used after the invoice has been

assigned to an accountant we will make it visible only after the assign

fields have been entered.



[Assigned Date] != ‘’

5. Click Ok

6. Click Save.


Create a Text Field Named Check Number

Drag and drop a text field from the toolbox into the Approval section.


Name and The text Field.

1. Name this field “Check Number”

2. Click Save.


Create a Text Field Named Check Date

Drag and drop a Text field from the Toolbox into the Approval section.

1. Name the text field

2. In the properties box click in Field Name and type Check Date

3. Check Editability/Enable Control and make sure the formula box shows false

4. Click Save.


Create A Button Named Approved-Submit Check

1. Drag and drop a Button field from the Toolbox into the Approval

section.

2. Name this Button Approved – Submit Check


Creating the button Approved – Submit Check



2. In the Action choose set Value From the Drop Down List

3. In the Field Choose Check Date from the drop down list

4. In the Value Formula box type

Today()

5. Click Add


1. In the Action choose set Value From the Drop Down List

2. In the Field Choose Invoice Approved

3. In the Value Formula box type

‘Yes”

4. Click Add

Since this button will essentially complete the invoice process, it will do a multitude

of things. Namely, it will assign completion notices, set dates and email the

vendor.

Since this button will deal with a few different forms, we will return to it after

constructing other sections.


Change column width

1. In the Properties Box Click on Column Name and type Column

2. In the Column width type 50%

3. Click Save


Create New Column Named New Column

Drag And Drop a new Column from the Toolbox next to the other Column.


Name the new column Processing Info

1) In the Properties Box click on Section Name and type Processing Info.

2) Check the box next to Visibility Control and in the formula box put

[Assigned Date]!= ‘’

This formula is to record the date the invoice was completed


Creating text fields named Invoice Processed by and Invoice Processed Date

Drag and drop a Text field from the Toolbox into the Processing Info Section

1. In the properties box click in the Field Name and type Invoice Processed By

2. Click Save

Drag and drop a Text field from the Toolbox into the Processing Info Section

1. In the properties box click in the Field Name and type Invoice Processed Date

2. Check the box Editability/Enable control and make sure the formula box shows false

3. Click Save.

Continue creating the Approved-Submit Check button



2. Select Set Value from the Action dropdown menu

3. Select Invoice Processed Date from the Field dropdown menu

4. Click Formula Builder next to the Value and in the formula box and enter the following

formula: Today()

5. Click Ok

6. Click Save.



2. Select Set Value from the Action dropdown menu

3. Select Invoice Processed By from the Field dropdown menu

4. Click Formula Builder next to the Value text box and enter the following formula:

[Assigned To].[Last Name] + ‘ ‘ + [Assigned To].[First Name]

5. Click OK.

6. Click Save.



2. Select “Save & Email” from the Action dropdown menu.

3. Click on Add Fields next to the Email To formula box.

4. Select [Vendor Email]

5. Type your invoice has been processed. In the Subject text box

6. Click Field next to the Body text box.

7. Select Check Number from the dropdown menu.


9. Click Save.


Create a Standard Section named Rejection

Drag and drop Standard Section from the Toolbox beneath the Approved-Submit

check button

1. In the properties box, click in to the Section Name and type Rejection in it.

2. Check the box Visibility Control, click on Formula Builder Select

[Assigned Date]!=’’&&[Check number]==’’

3. Click Save.


Create text field named Rejected Date

Drag and drop a Text Field from the toolbox in the beneath the rejection section.

1. In the Properties Box click in Field Name and type Rejected Date

in it

2. Click Editability/Enable control and make sure the formula false

is there

3. Click Save.


Create text field named Rejected Reason

Drag and drop a Text Field from the toolbox in the beneath the rejection date field


Name the text field

1. In the Properties Box click in Field Name and type Rejected Reason in it.

2. Click User Mode Help


2. Type: Why is this invoice being rejected

3. Click OK.

This is to create a Help button to find out the reason of rejection. Help will appear as a

little question mark on the blue circle under the Rejected Reason field


Create Button named Reject

Drag and drop a button field from the toolbox under the Rejected Reason Field

1. In the Properties box click on field Name called and type Reject in

2. Click Save.

3. Click Event on the top of the properties box


Creating the button

1. Click on Add New Event

The button will send emails to the persons tagged in it. For that we will be adding on-click

events to the button, however before doing that we need to create a Management Section

and get back to the button later. The following screens will demonstrate described above.


Create Section Named Management

Drag and drop a Standard Section from the toolbox beneath the Reject button


Name the Section

1) In the Properties Box, click in Section name and type Management

2) Check the box next to visibility control and make sure the formula box displays

false.

3) Click Save.

Create Text Field named Rejected Email Body


Drag and drop a text field from the toolbox in the Management section.


Name the Text field

1. In the Properties box click on Field Name and type Rejected Email

body.

2. Check Calculated click on Formula Builder and choose

'Invoice ' + [Invoice Number] +' was rejected for ' + [Rejected Reason]

3. Click ok,

4. Click Save


Continue creating the Reject Button

Click on Reject Button

1. Click on Event


3. In the Action drop down list choose Save & Email

4. Click Add Fields next to Email to and choose

[Approver Email], [Assigned To Email], [Email], [Vendor Email]

5. In the Subject box type An invoice was rejected

6. Next to Body click Rejected Email Body

7. Check box next to Include link to record.

8. Click Save


Continue creating the Reject Button


2. In the Action drop down list choose Set Value

3. In the Field drop down list select Rejected Date

4. In the Value formula box select Today()

5. Click Add

6. Click Close


Creating Views

We will create views to see the invoices we have created and where they are in the process.

To this effect, we can filter which invoices appear in which views by manipulating the view

definition. There will be five separate views:

All Invoices

Completed Invoices

Invoices Awaiting Project Manager Review

Invoices in Accounting Queue

Invoices Waiting for Department Approver

In the Design mode click on views and click on Add a New View.

As Shown on the screen below

1. Type “All Invoices” in the View Name text box

2. Select Invoices from the Type dropdown menu

3. Select all the fields under the “Show in View” and ”Searchable” check boxes

4. Select Invoice Number as default search.

5. Click Save.



Click Add New View

As Shown on the screen below

1. Type “Completed Invoices” in the View Name text box

2. Select Invoices from the Type dropdown menu.

3. Check the following boxes under “Show In View”:

o Invoice Number

o Payment Due Date

o Vendor Name

o Invoice Total

o Check Number

4. Select Invoice Number as the Default Search

5. Click Save

6. Click Back



Check Predefined Filters

1. Check Check Number from the “Select Fields for Group 1” box.

2. Click Ok


1. Select “Not Null” from the dropdown box next to Check Number.

2. Click Save.


Click on Views

Click Add New View

1. Type “Invoices Awaiting Project Manager Review” in the View Name text box



Invoice Number

Payment Due Date

Invoice Total

Project Manager

Email


5. Click Save

6. Click Back



Check “Predefined Filters”


1. Check “Project Manager Reviewed” from the “Select Fields for Group 1” box.

2. Click Ok

1. Select “Not Null” from the dropdown box next to Project Manager Reviewed.

2. Click Save


1. Click Views

2. Click Add New View

As Shown on the Screen of next page

3. Type “Invoices in Accounting Queue” in the View Name text box



o Invoice Number

o Payment Due Date

o Invoice Total

o Assigned To

o Assigned To Email


7. Click Save

8. Click Back



Check Predefined Filters


Check Department Approver Reviewed and Invoice Approved and click OK


Invoices Waiting for Department Approval

1. Click Views

2. Click Add New View

3. Type “Invoices Waiting For Department Approver” in the View Name text box



Invoice Number

Payment Due Date

Invoice Total

Approver Name

Approver Email


7. Click Save.

8. Click Back.




Check “Predefined Filters”


1. Check “Project Manager Reviewed” from the “Select Fields for Group 1” box.

2. Check “Department Approver Reviewed” from the “Select Fields for Group 1” box.

3. Click Ok

1. Select “Not Null” from the dropdown box next to Project Manager Reviewed.

2. Select “Null” from the dropdown box next to Invoice Approved.


3. Click Save. Click Applications, Invoice Application, Forms, Invoice.

Continue creating the buttons

In the Tab Invoice Submission Info click on Submit Project Manager button

1. Click on the Event tab

2. Click on “Add New Event”

3. Select Go To View from the Action dropdown menu

4. Select “Invoices Awaiting Project Manager Review” from the Go to View dropdown

menu

5. Click Add


Continue creating the buttons

click on Submit to Department Approver




9. Select “Invoices waiting for Department Approver” from the Go to View dropdown

menu

10. Click Add


Create Button named Submit to Accounting

Drag and Drop a Button field from the toolbox beneath the Submit to Department

Approver button.


Name the button

1) In the properties box click in Field Name and type Submit to Accounting in it

2) Check the Visibility Control and in the formula builder select:

[Department Approver Reviewed]=='' && [Project Manager Reviewed]!=''

3) Click Save

4) Click Event


Click Add New Event

1. In the Action drop down list choose Set Value

2. In the Field drop down list choose Department Approver Reviewed

3. In the Value formula box type ‘Yes’ and click Add


Click Add new Event

1. In the Action drop down list choose Save Record

2. Click Add.


Click add New Event

1. In the Properties box Action drop down list choose go to view

2. Go to view drop down list choose Invoices in Accounting Queue

3. Click Add


Click on the tab Invoice Processing

11. Click on the Button named “Assign”




15. Select “Invoices in Accounting Queue” from the Go to View dropdown Click Add


1. Click on the Button named Approved –Submit Check




5. Select “Completed Invoices” from the Go to View dropdown menu

6. Click Add


User Mode

Processing the application on the Desktop Browser

1. Click New Invoice

Key Point

User Mode is how your end users will see and use your app.


Enter the Data from the tables below.

Invoice Info

Invoice Number 555

Payment Due Date Choose the date from the calendar

Currency Choose USD from the drop down list

Vendor Info

Vendor Choose Abadie from the drop down list

Vendor Name Should be there after selecting the vendor

Vendor Address Should be there after selecting the vendor

City And State Should be there after selecting the vendor

Vendor Email Should be there after selecting the vendor

Vendor Phone Should be there after selecting the vendor

4. Click on Line Items and type and select following


Items

Item Description IPad

Item cost $499

Account Select a/P –Employer P/R Tax ( 20740-040)

Expense Type Select trust


Project Manager

Project Manager Select Adams Marvin

Name Should be there after selecting the Manager

Email Should be there after selecting the Manager

Department Should be there after selecting the Manager

Office Should be there after selecting the Manager

Region Should be there after selecting the Manager


Department Approver

Approver Name Select Danielle Carlin

Approver Email Automatic

Approver threshold Automatic

Attach document if needed and click on the button Submit to Project Manager.

Click On Submit to Project Manager.


User Mode on Android.

Project Manager sees that there is an Invoice Submitted for his review and logs in to

his account with Android and Assignes the Invoice to Department Approver.

Once the project Manager logs in with his credentials to his WAG Account , clicks on

Accounts Payable Invoice Processing Workflow Application



Clicks on Views


Clicks on Invoices Awaiting for Project Manager review


And See the invoice awaiting form him. He clicks on the invoice



And Submits it to Department Approver by clicking Submit to Department Approver

Button.

User Mode on iOS

Department Approver receives an email that she has an invoice awaiting for her review and

she logs in to her WAG account with her Ipad.

After the Department Approver logs into her account she will click on her Application:

Accounts Payable Invoice Processing.


Clicks On views


Clicks on Invoice waiting for department Approver


Clicks on the Invoice

And assigns the Invoice to Accountant Bob Gnitnuocca, Assigned to Email and Assigned Date

will be there automatically after selecting the accountant.


Clicks on Submit to Accounting


Now it’s time for the Accountant to submit the Check. For that he will log in to his personal

WAG Account on the Desktop browser.

He clicks on Views and “Invoices in Accounting Queue”.

And sees this invoice in his bucket:

He clicks on it, clicks edit on the invoice page and clicks on “Invoice Processing” and rejects or

approves the Invoice by clicking on the relevant button.


This is how the Invoice is processed in the Invoice Application that you created.

You can Also Watch the video Tuirorials of this and other app development on our youtube

channel www.youtube/webappgenerator.

- The End -

http://www.youtube/webappgenerator