Master -> Detail Relationship

Thanks for the help! I appreciate it very much…

Okay, thanks! Now do I select Done, Error, or what?

This is what the code looks like now. However, there’s still no response.

I’ve tried the dynamic event on the list and the detail action, but it either shows the alert when the page loads or when the row in the list is clicked there is no alert at all.

stop focusing on the code :sweat_smile:

on a second thought leave the events on the serverconnect they are not the one we need.

go to the alert and in the dynamic attribute show put something like this replace serverconnect name with yours and the query name(you can select them on the actions list)
!serverconnect.data.query.hasItems() && !serverconnect.state.executing

I see that my problem of not following your instructions is due the site that I am currently working on is Bootstrap 3. These alerts you mention appears to be the steps for Bootstrap 4. Is this correct?

I’ve never had problems with this before with other types of server connect actions. This is the first time I am using the ‘click a table row’ to open the details on the same page.

The rows are from a user list table, and its related details are from another table. When the details have data all works fine. When there is no details relative to the user nothing happens.

So I have two server connect actions: one for the list of users; the other is for the user’s detail.

When the row is clicked, and no data exists, I want an alert to popup and inform the user: This information has not been provided.

I am having a brain freeze. It’s just one of those days when even coffee fails me.

I appreciate your time and help.

Alerts doesn’t matter. you can use any element you want. you need to set its show attribute and use the detail of the user serverconnect.
i think you need to understand the workflow a bit more in wappler. but its completely logical and you will get it

i will show you a page im working on and you will get an idea of what is possible.
give me a second to upload the video

I agree. I haven’t gotten use to the design view concept. I have always viewed the code. Plus, it’s the OCD. Ha!

I’ll give it another go and let you know how it turns out.

Thanks!

Okay, I will take a look.

Here is the video from my phone
Dont mind the language
You can see the animations on the page load and the alert show and hide passed on the scan result.
If there is a result a smooth show of a record is displayed
If there is no result a yellow alert will show
The blue alert is only showing when the server is executing.
All done with wappler.
D5439983-36CB-4E50-BEF0-9689480C7F03.MP4 (8.4 MB)

Impressive.

All of these are triggered by the serverconnect & dynamic attribute, show/hide?

I’m stumped. I’ve tried and failed each time. However, I will NOT give up on this.

My situation is this:

On the users page:

  1. Step 1 the user fills out a form on page 1. The completion of form 1 will grant access to the form on page 2.
  2. The user fills out form 2, and the process continues to the next page, etc.

On the Form Managers page:

  1. There are two tables.
  2. On the left side is the list of all the completed form 1’s data.
  3. On the right side is a table that will display the details of the data where LIST ID = DETAIL ID. The data in this table is not seen until a row in the table one the left side is clicked.
  4. If there is Detail data associated with List data via ID, the Detail information will be displayed in the table on the right.

If not, I want a note to appear that states a message indicating the form data for that record is incomplete.

So far, if Detail exist, the Details are displayed properly. However, if there is no Detail data, the error message (browser alert) does not appear.

Obviously, I am missing something… or I’m blind in one eye!

3 posts were split to a new topic: Working with Arabic and RTL in Wappler

Lets start by hiding the detail table first.
on the table element what do you have set up in the show attribute?

dmx-show="id.value

That sets the initial state as hidden. Once the row is clicked, if the form has data, it is displayed in the detail table.

If not, the detail table remains seen, but the row is replaced with an empty row.

Recording.mp4 (3.5 MB)

try to change it to check if the detail serverconnect have items. do you know how?

So what works is to build two tables using

sc_career_orientation_staff_detail.data.career_inbound_staff_detail.hasItems()

one with show and the other with hide.

Then if I wrap the whole region with the show=“id.value”, maybe that will work.

why do you keep checking the id.value?

This is what I have finally got to display.

As for the id.value, it was in the tutorial to hide the detail table. Once a record was clicked it revealed the table. I have no idea why.

The video shows what the final results are.

Recording.mp4 (3.0 MB)

It looks crazy, but it works. Ha!

Here’s the code:

<div class="col-sm-12">

	<h2><i class="fa fa-refresh">&nbsp;</i>Career Inbound Orientation <span class="pull-right">

		<button class="btn btn-sm btn-primary" id="initiate_inbound_btn" dmx-on:click="browser1.goto('../email/send_mo_email.php')"> <i class="fa fa-envelope-o">&nbsp;</i>Send Email</button>

	</span> </h2>

	<p class="below-20">This page list the inbound orientation submissions for career missionaries.</p>

</div>

<div class="col-sm-12"> Today's Date: <?php echo $today; ?> </div>

<!-- /.col-sm-12 -->

<div class="below-50">

	<div class="col-sm-6">

		<h4 class="page-header above-20"> <i class="glyphicon glyphicon-log-out">&nbsp;</i> Career Inbound Orientation Submission List </h4>

		<p class="text-danger" dmx-hide="sc_career_orientation_staff_list.data.career_inbound_staff_list.hasItems()"> At this time {{sc_logged_in.data.query_user[0].firstName}} there are no inbound orientation submissions on file. </p>

		<p class="text-primary" dmx-show="sc_career_orientation_staff_list.data.career_inbound_staff_list.hasItems()"> {{sc_logged_in.data.query_user[0].firstName}} below is the current data on file. Click row to view the details.</p>

		<!-- LIST BELOW -->

		<div class="table-responsive small" dmx-show="sc_career_orientation_staff_list.data.career_inbound_staff_list.hasItems()">

			<table class="table table-striped table-hover table-condensed">

				<thead>

					<tr class="small">

						<th>Missionary</th>

						<th width="100">Acct</th>

						<th>Country / Field</th>

						<th width="100">Submitted</th>

					</tr>

				</thead>

				<tbody is="dmx-repeat" dmx-generator="bs3table" dmx-bind:repeat="sc_career_orientation_staff_list.data.career_inbound_staff_list" id="tableRepeat1">

					<tr dmx-on:click="id.setValue(career_inbound_id)">

						<td>{{first_name}} {{last_name}}</td>

						<td>{{ms_account}}</td>

						<td>{{field}}</td>

						<td>{{created.formatDate("MM-dd-yyyy")}}</td>

					</tr>

				</tbody>

			</table>

		</div>

		<!-- LIST ABOVE -->

	</div>

	<!-- /.col-sm-6 -->

	<div dmx-show="id.value">

	<div class="col-sm-6" dmx-show="sc_career_orientation_staff_detail.data.career_inbound_staff_detail.hasItems()">

		<h4 class="page-header above-20"> <i class="glyphicon glyphicon-log-out">&nbsp;</i>Career Inbound Orientation Missionary Detail </h4>

		<p class="text-primary">Below is the current details for this record.<br></p>

		<!-- LIST BELOW -->

		<div class="table-responsive small">

			<table class="table table-striped table-hover table-condensed">

				<thead>

					<tr class="small">

						<th>Missionary</th>

						<th width="100">Account</th>

						<th>Country / Field</th>

						<th class="text-center">Departure</th>

						<th width="100">Submitted</th>

					</tr>

				</thead>

				<tbody id="tableRepeat2" is="dmx-repeat" dmx-generator="bs3table" dmx-bind:repeat="sc_career_orientation_staff_detail.data.career_inbound_staff_detail">

					<tr class="table-responsive">

						<td>{{first_name}} {{last_name}}</td>

						<td>{{ms_account}}</td>

						<td>{{field}}</td>

						<td class="text-center">{{departure_date}}</td>

						<td>{{created.formatDate("MM-dd-yyyy")}}</td>

					</tr>

				</tbody>

			</table>

		</div>

		<!-- LIST ABOVE -->

	</div>

	<!-- /.col-sm-6 -->

	</div>

	<!-- /id.value -->

	<div dmx-show="id.value">

	<div class="col-sm-6" dmx-hide="sc_career_orientation_staff_detail.data.career_inbound_staff_detail.hasItems()">

		<h4 class="page-header above-20"> <i class="glyphicon glyphicon-log-out">&nbsp;</i>Career Inbound Orientation Missionary Detail </h4>

		<p class="text-primary">Below is the current details for this record.<br></p>

		<!-- LIST BELOW -->

		<div class="table-responsive small">

			<table class="table table-striped table-hover table-condensed">

				<thead>

					<tr class="small">

						<th>Missionary</th>

						<th width="100">Account</th>

						<th>Country / Field</th>

						<th class="text-center">Departure</th>

						<th width="100">Submitted</th>

					</tr>

				</thead>

				<tbody>

					<tr class="table-responsive">

						<td colspan="5" class="text-uppercase text-center text-danger">Missionary has not submitted the detail info. <a href="mailto:revjrblack@me.com?subject=Please submit your missionary information today."><i class="fa fa-envelope">&nbsp;</i>Send Notice</a></td>

					</tr>

				</tbody>

			</table>

		</div>

		<!-- LIST ABOVE -->

	</div>

	<!-- /.col-sm-6 -->

	</div>

	<!-- /id.value -->

</div>

<!-- /.row -->

add more action to not show it when the serverconnect is executing. didn’t you think you should not show the table if the serverconnect is still waiting for the server?:sweat_smile:

sc_career_orientation_staff_list.data.career_inbound_staff_list.hasItems() && !sc_career_orientation_staff_list.state.executing

And here you don’t need the id.value remove it.
put this in the second div show.
sc_career_orientation_staff_detail.data.career_inbound_staff_detail.hasItems() && !sc_career_orientation_staff_detail.state.executing

why do you hide it if there is items in query? if that is intentional then change it to this:

remove the id.value
and change the second div from hide to show. and add this:
!sc_career_orientation_staff_detail.data.career_inbound_staff_detail.hasItems() && !sc_career_orientation_staff_detail.state.executing

i may have made mistakes but im not used to search for events in code view.

The reason it was hidden is because I wanted the right-side detailed data hidden until a row on the left-side is clicked.

I was unfamiliar with the .state.executing – where can I go to learn more about this type of functions?

Thanks! I really appreciate the help.

Sincerely,
J. R. Black

1 Like

i just play around with this stuff :sweat_smile:

1 Like