Build-On Tutorial:

Invoicing

Invoicing: Lesson 5

View Unpaid Invoices

Lesson Overview

In this lesson you will create an Invoice List layout and you will be able to filter it by status.

Here’s a sneak peek of what you will build:

Step 1 - Create Invoice List layout

You will create a layout with a list of all invoices.

  1. Enter Layout mode using the Edit Layout button in the status toolbar.

    Note: You can also enter Layout mode using the View > Layout Mode menu item, or the keyboard shortcut Command-L (macOS) / Control-L (Windows).
  2. Use the Layout pulldown menu in the status toolbar to switch to the Desktop > Blank > Blank | Desktop - List layout.
  3. Duplicate the layout using the Layouts > Duplicate Layout menu item.

    Note: You can also use the Manage Layouts dialog (File > Manage > Layouts...) to duplicate a layout. This dialog is also useful for organizing and reordering your layouts.
  4. Using the Layout Setup dialog (Layouts > Layout Setup…) rename your layout to Invoice List.
  5. While still in the Layout Setup window, choose to Show records from: the INVOICE table occurrence.
  1. Back on the layout, got to Layout mode and change “Title" to “Invoices”.
  2. Using the sample field as an example, add the following fields to the layout (delete the sample field):
    1. INVOICE::ID
    2. invoice_JOB::Job_Name
    3. invoice_job_CLIENT::Name
    4. INVOICE::Date, with the data formatted as 12/25/14 with Zero as the leading character for both day numbers and month numbers via the Data tab of the Inspector.
    5. INVOICE::Status
    6. INVOICE::z_Invoice_Total, with the data formatted as Currency, with 2 decimal places and the thousands separator turned on via the Data tab of the Inspector.
  3. All of the fields should be styled as txt Minimal.Black.Left via the Styles tab of the Inspector, except for the z_Invoice_Total, which should be styled as txt Minimal.Black.Right.
  4. Using the sample label as an example, create labels for every field (double-click on field and select Create label) and place them above each field of the Body.
  5. Style all of the new labels as label List.Left, except for the label Total. Style Total as label List.Right.
  6. On the Position tab of the Inspector under Autosizing, set the client’s Name field to anchor top, left, and right. Set the Date, Status, and Total fields, along with their labels, to anchor top and right.
  7. Go to the Part Setup dialog (Layouts > Part Setup...) and create a Trailing Grand Summary. This is what your Part Setup window will look like:
  1. Activate the Styles tab of the Inspector. Style the Trailing Grand Summary part as background Minimal.White
  2. Activate the Position tab of the Inspector, and change the Height of the Trailing Grand Summary to 70 pt.
  3. Add the text “No invoices found” to the center of the Trailing Grand Summary, and style it as label Center.

    Users should only see this if no invoices are found. You can also think of it as wanting to hide the text when the found set is greater than zero. To achieve that, go to the Data tab of the Inspector panel. Set the Hide object when condition to: Get( FoundCount ) > 0

    Turn on Apply in Find mode. Set the Autosizing to anchor top, left, and right.
  1. Next you will add a button to get from the Invoice List to the Invoice Detail, similar to other list layouts in your app. Navigate to the Client List layout and copy the button on the background of the Body on the layout.
  2. Navigate back to Invoice List and paste the button. Using the position tab of the Inspector, place the button with the Left at 0 pt and the Top at 120 pt. Move the button to the back of the Body using Arrange > Send to back.
  3. Double-click on the button to view the Button Setup window. Change the Optional script parameter to “Invoice Detail”.

Step 2 - Filter Invoice List

You will add a filter field to the Invoice List layout and use it to filter invoices by status.

  1. Open the Manage Database dialog and create a text field in the Global table that will be used for filtering invoices, naming it g_Filter_Invoice. Select Options… and in the Storage tab select Use global storage (one value for all records).
  2. Back on the Invoice List layout, Select the Header part and resize it, setting the Height to 184 pt on the Position tab of the Inspector. Delete the gray line and move the labels near the bottom of the header.
  3. For the filter field, you will have to create a list of values for that filter field to show. Go to File > Manage > Value Lists… and click on the New… button. Name your value list Invoice | Filter and type in Custom values:

       Not Sent
       Sent
       Not Paid
       Paid
       Canceled
  4. Add the _Global::g_Filter_Invoice field to the header.
  5. In the Data tab of the Inspector panel, set the Control Style to Pop-up Menu.
  6. Set the placeholder text to “Filter…”.
  7. Select to show values from: the Invoice | Filter value list. Turn on the option to Include arrow to show and hide list.
  1. Add a button with the text “Clear" next to the filter field. Later in this lesson, you will attach a script to clear the filter and show all upcoming tasks.
  2. Set the Clear button to the style btn Minimal.Blue.Previous.
  3. When the filter field is empty, the Clear button isn’t needed. Set the Hide object when condition on the Data tab of the Inspector to the calculation:
IsEmpty( _GLOBAL::g_Filter_Invoice )

Step 3 - Create filter script and setup filter buttons

Create a script to either filter the invoice list or clear the filter field and show all invoices. You will use the script parameter “clear” to indicate the second action. Also you will set up the filter buttons you created in a previous step.

  1. Open the Script Workspace, duplicate the Template Script and name it TRIGGER_Filter Invoices ( action ).
  2. If the user wants to see all invoices, the filter field should be cleared. Add the following steps to the beginning of the script:

Set Variable [$action ; Value: Get ( ScriptParameter ) ]

If [ $action = "clear" ]
   Set Field [ _GLOBAL::g_Filter_Invoice ; "" ]
   Show All Records
End If

  1. When the filter field is not empty you want to include it in the search for invoices. Add these steps to your script:

    NOTE: See Step 4 for information on the Sort Records script step.

If [not isEmpty ( _GLOBAL::g_Filter_Invoice ) ]
   Set Error Capture [ On ]
   If [ _GLOBAL::g_Filter_Invoice = “Not Paid”]

      # find invoices with all statuses except "Paid"
      Enter Find Mode [ Pause: Off ]
      Set Field [ INVOICE::Status ; “==Paid”]
      Omit Record
      Perform Find []
   Else
      Enter Find Mode [ Pause: Off ]
      Set Field [ INVOICE::Status ; “==” & _GLOBAL::g_Filter_Invoice ]
      Perform Find []
   End If

End If

Scroll Window [ Home ]
Sort Records [ Restore ; With dialog: Off ]
Go to Record/Request/Page [ First ]

  1. For the Sort Records script step, sort the records by the INVOICE::Date field, ascending.
  1. Go to the Invoice List layout. In order to have the found set update every time a user selects a new value for the g_Filter_Invoice field, right-click the field and select Set Script Triggers. Choose the OnObjectModify event and select the TRIGGER_Filter Invoices (action) script.
  2. Set the Clear button to perform the script TRIGGER_Filter Invoices (action) also, but with an Optional script parameter of "clear".

Step 4 - Add navigation buttons

You will add buttons to the Dashboard and Menu | Card layouts to allow a user to access the list of invoices you created.

  1. Enter Layout mode and navigate to the Desktop > Dashboard layout.
  2. Duplicate one of the existing navigation buttons by selecting it and then using the keyboard shortcut Command-D (macOS) / Control-D (Windows).
  3. Double-click the new button to open the Button Setup dialog. While in this dialog, make the following changes:
    1. Change the button name to “Invoices”.
    2. Change the icon to an appropriate icon representing invoices.
    3. Change the Optional Script Parameter: to “Invoice List". The button calls an existing script that will navigate to the layout named by the script parameter.
  1. Rearrange the buttons on the layout so they are in a configuration that works for you.
  1. Enter Layout mode and navigate to the Desktop > Menu | Card layout. You will add a navigation button here as well.
  2. Double-click on the menu to open the Button Bar Setup dialog. Navigate to the last segment in the button bar and then click the plus button to add a new segment.
  1. Name the segment “Invoices”.
  2. Set the Action: for the new segment to Perform Script. Select the Go To... From Navigation ( navigation ) script, with a parameter of “Invoice List”.
  1. Close the Button Bar Setup dialog. Resize the height of the button bar so each button has a height of 50 pt. The layout should now appear as shown below.

Step 5 - Review your work

You’ve completed the Invoices Build-On! You have implemented invoices into your app.

  1. You should be able to filter the Invoice list by different invoice statuses.
  2. The Clear button should clear the filter field and show all invoices.
  3. You should be able to open the Invoice list from the Dashboard and Card menu.