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"> </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"> </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"> </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"> </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"> </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"> </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?
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
1 Like