The custom query that will be set up further will require the ID of the user who submitted the booking. By default, this data is not stored in JetBooking columns, so it is needed to create a dedicated column. 

Navigate to WordPress Dashboard > Bookings > Settings > Tools. Add a new column by pressing the “New DB Column” button. Give a name to the column — “user_id”.

After that, click the “Update Booking Tables” button. Now, a new column in the database is created. It will store the ID of the user after the booking form submission.

In the following steps, we will add a form field for fetching the ID of the user who made the booking and map it with the “user_id” column created previously.

Building the booking form created in JetEngine

If the booking form was set up in the Forms module of JetEngine, find the form in WordPress Dashboard  > JetEngine > Forms and proceed to edit it. 

Add a new field of a “Hidden” Type. Select the “Current User ID” option as a Field Value of this field. The field will fetch the ID of the currently logged-in user. 

Click the “Apply Changes” button to save the result.

Proceed to the Post-submit Action / Notifications Settings section of the form editing screen and click the pencil-shaped button to edit the “Apartment booking” action. 

In the DB columns map section, map the previously created “user_id” column with the new Hidden field by entering the name of the Hidden field into the specific input field.

Click the “Apply Changes” button to save the action settings and update the form. 

As a result, the ID of the user who submitted the form will be saved to the “user_id” column in the booking database.

Adjusting the booking form created in JetFormBuilder

If the booking form was set up with the JetFormBuilder plugin, find the form in WordPress Dashboard  > JetFormBuilder > Forms and proceed to edit it. 

Add a new Hidden Field block. Select the “Current User ID” option as a Field Value of this field. The field will fetch the ID of the currently logged-in user.

Proceed to Post Submit Actions section of the JetForm tab and click the pencil-shaped button to edit the “Apartment Booking” action. 

In the DB columns map section, map the previously created “user_id” column with the new Hidden field by completing the name of the Hidden field into the corresponding input field.

Click the “Update” button to save the action settings and then update the form. 

As a result, the ID of the user who submitted the form will be saved to the “user_id” column in the booking database.

Testing the form

Let’s test the form by making a sample booking. 

Navigate to the front end view of the site and find the page where the form is located. Fill out the form and submit it.

After making a test booking, return to WordPress Dashboard and proceed to Bookings > Bookings. Find the created booking and click the “Details” button.

Check the “user_id” column, it should contain the ID of the user who made the booking.

The custom query will filter bookings by those made by the current user and will allow displaying the results as a listing. 

Head to WordPress Dashboard > JetEngine > Query Builder and click the “Add New” button to create a new query. 

Name the query and select the “SQL Query” Query Type. Move to the body of the query and choose the “jet_apartment_bookings” table to retrieve the results from it. 

The “jet_apartment_bookings” table returns all bookings created on the site. These are the items displayed in WordPress Dashboard > Bookings > Bookings.

To narrow this list down to those bookings created by the currently logged-in user, add a new query clause in the Where (query clauses) section of the query editor. Now, let’s compare the previously created “user_id” column to the ID of the currently logged-in user. 

Click the “Add New” button to add a new clause. In the clause settings, select the “user_id” column as the Column. Then, choose the “Equal (=)” comparison operator in the Compare dropdown. On the right side of the Value input field, click the Dynamic Tags icon and select a “Current User ID” macro. Finally, specify the Type of comparison as “Numeric”.

Now, the query retrieves only those bookings created by the current user. 

Press the “Add New” button on the right sidebar to save this custom query.

The next step is to create and style the Listing Template for the listing of bookings on the user account. The Listing Template can be made with either Elementor or Block Editor.

Building a Listing Template in Elementor

Navigate to WordPress Dashboard > JetEngine > Listings and press the “Add New” button to add a new template.

In the Setup Listing Item window, select “Query Builder” as the Listing Source; then, select the custom query created in the previous step and give a name to the listing. 

Finally, select “Elementor” for Listing View if you build the website with Elementor and click the Create Listing Item button. 

Now, it is time to style the listing template for the booked items. You are free to display any column retrieved by the custom query. In our example, we will display the ID of the booking, the status of the booking, the linked title of the booked instance, dates, and user information. All of this data will be displayed with the Dynamic Field widget.

First, drag and drop a Dynamic Field widget to the editing area. Select the “Post/Term/User/Object Data” as a Source of the widget. In the Object Field dropdown, scroll down until you see the name of the custom query. Pick the “booking_id” column.

To include additional text to this value, enable the Customize field output toggle in the settings of the Dynamic Field widget and customize the format area. For example, with a “Booking ID: %s” value.

Now, the listing displays the ID of the booking. Similarly, add the status of the booking.

Add a new Dynamic Field widget or duplicate the existing one. Repeat the above steps to display the “status” column and format it.

To display the title of the post that was booked, add another Dynamic Field widget and select the “apartment_id” column as the Object Field. The value of this column is the post ID. 

To transform it into a linked title, toggle on the Filter field output toggle and select a “Get post/page link” Callback. This callback formats the value and outputs the name of the post instead of its ID.

Find more information on callbacks in the Dynamic Field Widget Overview. 

Now, it is time to display the booked dates. Add two Dynamic Field widgets, one showing the “check_in_date” column and the other displaying the “check_out_date” column. These columns contain the check-in and check-out dates in a timestamp format. 

To format the timestamp as a human-readable date, activate the Filter field output toggle and choose the “Format Date” callback. Don’t forget to define the date format according to the date and time formatting documentation.

After customizing the output of the check-in and check-out dates, add the last Dynamic Field widget to display the user information, although this step is optional. 

Choose the “user_id” column as the Object Field. Then, toggle on the Filter field output and find the “Get user data by ID” Callback. This callback retrieves default user fields by the ID of the user. Choose any desired option in the User Data to get dropdown.

That’s it for the main settings. Play around with styling to achieve the best design for the listing. Once finished, don’t forget to update the changes.

Creating a Listing Template in Block Editor (Gutenberg)

Navigate to WordPress Dashboard > JetEngine > Listings and press the “Add New” button to add a new template.

For the Listing Source, select “Query Builder”; then, pick the custom query created in the previous step and give a name to the listing. Lastly, choose“Blocks (Gutenberg)” for Listing View If you build the website with Block Editor and click the “Create Listing Item” button. 

Now, it is time to style the listing template for the display of the booked items. You are free to display any column retrieved by the custom query. In our example, we will show the ID of the booking, the status of the booking, the linked title of the booked instance, dates, and user information by using the Dynamic Field block.

First, drag and drop a Dynamic Field block to the editing area. Pick a “Post/Term/User/Object Data” as a Source of the block. In the Object Field dropdown, scroll down until you see the name of the custom query and choose the “booking_id” column.

To add text to this value, enable the Customize field output toggle in the settings of the Dynamic Field block and customize the format area with the needed value in the following format: “Booking ID: %s”.

Now, the listing displays the booking ID. Now, let’s add the status of the booking.

Add a new Dynamic Field block or duplicate the existing one. Repeat the above steps to display the “status” column and format it.

To display the title of the post that was booked, add another Dynamic Field block and select the “apartment_id” column as the Object Field. The value of this column is the post ID. 

To transform it into a linked title, toggle on the Filter field output toggle and select a “Get post/page link” Callback. The callback formats the value and outputs the name of the post instead of its ID.

Find more information on callbacks in the Dynamic Field Block Overview. 

Now, it is time to display the booked dates. Add two Dynamic Field blocks — one displaying the “check_in_date” column and the other displaying the “check_out_date” column. These columns contain the check-in and check-out dates in a timestamp format.

To format the timestamp as a human-readable date, activate the Filter field output toggle and choose the “Format Date” Callback. Don’t forget to define the date format according to the date and time formatting documentation.

Once the output of the check-in and check-out dates is customized, add the last Dynamic Field block to display the user information(this step is optional). 

Choose the “user_id” column as the Object Field. Then, toggle on the Filter field output toggle and find the “Get user data by ID” Callback. This callback retrieves default user fields by the ID of the user. Choose any desired option in the User Data to get dropdown.

That’s it for the main settings. To style the blocks, use the JetStyleManager plugin. Once finished, don’t forget to update the changes.

The last part of our work is to display the created listing on the Account page of the user in JetEngine Profile Builder. We will create a new sub-page template and place the Listing Grid widget inside.

Showing the listing in Elementor

Firstly, create a new page template in WordPress Dashboard > Templates > Add New.

This template will be responsible for displaying the account sub-page with the list of booked items. 

Once inside the Elementor editing screen, find the Listing Grid widget and place it on the template. Choose the Listing created previously.

These settings are enough to display the bookings of the current user as a listing. To adjust the rest of the settings, check our Listing Grid Widget Overview. 

Once done with the styling, hit the “Publish” button to save the changes and return to the WordPress Dashboard. 

Now, it is time to apply the created template in Profile Builder. Navigate to JetEngine > Profile Builder > Account Page and click the “Add New Subpage” button to add a new sub-page for users’ bookings. 

Give a title to this sub-page and attach the template created previously. Click the “Save” button.

Finally, it is time to check the result. Check out the Account page to see the created bookings.

Building the listing in Block Editor (Gutenberg)

We are going to put the Listing Grid widget inside of the Listing Template for users and attach the new Listing Template to a sub-page of the Profile Builder. 

Navigate to JetEngine > Listings > Add New to add a new Listing Template. 

In the appeared pop-up, choose “Users” as the Listing source, give a name to the listing, and select “Blocks (Gutenberg)” in the Listing view dropdown. Press the “Create Listing Item” button.

This template will be responsible for displaying the account sub-page with the list of booked items. 

Once the editor is opened, find the Listing Grid block and place it on the template. Choose the Listing created beforehand.

These settings are enough to display the bookings of the current user as a listing. To adjust the rest of the settings, check our Listing Grid Block Overview. 

Once done, hit the “Publish” button to save the changes and return to the WordPress Dashboard. 

Now, it is time to apply the created template in Profile Builder. Navigate to JetEngine > Profile Builder > Account Page and click the “Add New Subpage” button to add a new sub-page for users’ bookings. Give a title to this sub-page and attach the Listing Template for users created previously. Click the “Save” button.

Ultimately, it is time to check the result. Check out the Account page to see the created bookings.