In this article, we'll discuss how to create a Shift Tracker app, which allows users to login, create new 'shifts', and then individually record clock-in and clock-out times for that shift.
The final result is a list of shifts with the user information, clock in and clock out times.
Page 1: Shifts Page
1. Any time a user is logged in, you have access to their user variables anywhere in the app, including when sending values to Google Sheets. For example, you can type {{ user.first_name }}, {{ user.last_name }}, {{ user.email }} or {{ user.id }} at any time to show or send that variable.
2. You would want to create a page called 'Shifts' and probably display them in a Table or a Calendar. You could filter the shifts by the user who is logged in. You'd have a User ID or User Email field or some identifying field in your shifts sheet to allow for using a Hidden Filter to ensure they're only seeing their own shifts.
3. You can add a 'New Shift' button, which creates a new row and then navigates the user to the 'Shift Details' page with the newly created shift's ID in the URL.
You can access the ID of the newly created row in a subsequent action step by using the following variable: {{ actionSteps.1.frontly_id }}
Breaking this down further....
actionSteps - The name of the data source that allows you to access response data from previous action steps. Note that this must be used only for steps that happened BEFORE the step you're trying to use this in.
1 - The number of the step I'm referencing. This can be the step number of any step that occured before the current step where you're using this variable
frontly_id - The name of a field I want to access in the response data. Note: The response data will include all the fields that you updated or created in the row for a Google Sheet action.
The final resulting URL would look like this:
yourapp.com/shift?id=54
The '54' would be the newly created ID, and with this in the URL (?id=54) you can access this variable like this {{ params.id }}
Page 2: Shift Details
On the Shift Details page, you will create 2 buttons:
1. Clock In
2. Clock Out
For each button, you will configure the button Click Action.
Choose the Google Sheets action, select your Shifts spreadsheet, and set the Action Type to 'Edit'.
In the 'Row ID' field, enter {{ params.id }}. This grabs the 'id' parameter we added to the URL in the previous step, and uses it to identify the specific row in the spreadsheet to edit.
In this same action, enter {{ time.now }} in your 'Clock In' field.
Repeat this step with the Clock Out button, but choosing the Clock Out field.
This will result in buttons that will update the specific shift by logging a time in the corresponding shift field when it's pressed.
Advanced Configuration
If you want to make this more advanced, you can conditionally show/hide the Clock In or Clock Out buttons using display conditions and dynamic variables.
Summary
You'll have a page where the user creates a new shift and then navigates to a Shift details page with the ID stored in the URL. This ID is used in your button actions to identify the specific shift.