Hi,
Thank you for looking into this. I thought I inserted the right code, but maybe I goofed, so I’m inserting it in this message. (Sorry if this is an unncessary repeat. I can no longer edit the previous message to let the readers know, so I hope that if someone reads that one, he or she reads this one too.)
As said before, I’m not a programmer and I’m only in week 2 of learning Wappler, but prompted by your comments I inspected the code – gosh, I really hoped that I would never have to do something like that – and noticed a couple of things:
a) There are two empty “flex containers” or what looks like them, in the code view, in lines 257 and 264, but the App Structure does not show them. This may be what @Sid was looking for.
b) Line 224 looks funny to me. It has a <div (I’ll google “div” later to learn what it is ) class=flex-column (I don’t know how that class appeared there, I don’t think I put it) and it has the conditional dmx-show statement inside it. This is probably what makes the program still work as expected, even though the App Structure area does not show any container. That said. I did not put it there, or at least, not willingly. Remember, I just tried to move one Title from one flex container to another and then all this mess happened.
So the questions are:
- Is this a bug or a user knowledge problem? If the latter, what did I do wrong?
- Irrespective of the above, how do I fix this without recreating the page. Is the “right way” to work in the Code View, cutting and pasting the code and editing where appropriate?
- Should I use a “Form Row” instead of a “Flex Container” to hold the fields that need to be shown or hidden? I found that a Form Row allows me to do what I wanted, much like the Flex Container. In case it’s not obvious, I don’t know the difference between them.
PS1: Possible enhancement to Wappler: When presenting the objects to select in the App Structure, provide a quick summary on what the object is used for when hovering it, or a pointer to where to learn about it.
PS2: On a totally unrelated note, I never looked in the code view before (why should I, right?) but now that I’m doing it, I see little thin green and orange lines to the left of the page. Do they mark the lines that have been inserted or changed since the last GIT change?
Thank you for all your help!!
<!doctype html>
Edit Case
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css">
<script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Collapse/dmxBootstrap4Collapse.js" defer=""></script>
<script src="../dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
<script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/dmxTyped.js" defer=""></script>
<script src="../dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/daterangepicker.min.css">
<script src="../dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxDatePicker/dmxDatePicker.css">
<script src="../dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer=""></script>
<script src="../dmxAppConnect/dmxBootstrap4Alert/dmxBootstrap4Alert.js" defer=""></script>
<dmx-serverconnect id="SC_GetCaseAndPM" url="../dmxConnect/api/Cases/GetCaseAndPMember.php" dmx-param:caseid="query.caseid"></dmx-serverconnect>
<dmx-query-manager id="querymgr_GetCaseAndPM"></dmx-query-manager>
<?php include '../webSecurity/ssi-header.php'; ?>
<div class="container-fluid">
<div class="row">
<div class="col"></div>
</div>
<div class="row justify-content-center pt-5">
<div class="col text-center">
<h5 class="text-secondary">Plan Member</h5>
<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].Firstname+' '+SC_GetCaseAndPM.data.query1[0].Lastname}}</h2>
<img src="../assets/images/vest-gold.jpg" width="300" dmx-on:click="modal_PlanMember.show()">
</div>
<div class="col text-center">
<h5 class="text-secondary">Case Status</h5>
<h2>{{SC_GetCaseAndPM.data.query1[0].Status}}</h2><img src="../assets/images/gold-binder.jpg" width="300" dmx-on:click="modal_CaseInfo.show()">
</div>
<div class="col text-center">
<h5 class="text-secondary">Payment Method</h5>
<h2 class="text-dark">{{SC_GetCaseAndPM.data.query1[0].PaymentMethod}}</h2><img src="../assets/images/gold-plaine-coin.png" width="300" dmx-on:click="modal_PmtMethod.show()">
</div>
</div>
</div>
<?php include '../webSecurity/ssi-footer.php'; ?>
<div class="modal" id="modal_PlanMember" is="dmx-bs4-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title text-light">Plan Member Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form is="dmx-serverconnect-form" id="serverconnectform_PM1" method="post" action="../dmxConnect/api/Cases/Upd_PM_BaseInfo.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="SC_GetCaseAndPM.data.query1">
<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].idPMEMBER" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname">
<div class="form-group row">
<label for="inp_Firstname" class="col-sm-3 col-form-label">Firstname</label>
<div class="col-sm-9 ">
<input type="text" class="form-control" id="inp_Firstname" name="Firstname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Firstname" aria-describedby="inp_Firstname_help" placeholder="Enter Firstname" required=""
maxlength="30">
</div>
</div>
<div class="form-group row">
<label for="inp_Lastname" class="col-sm-3 col-form-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_Lastname" name="Lastname" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Lastname" aria-describedby="inp_Lastname_help" placeholder="Enter Lastname" required=""
maxlength="30">
</div>
</div>
<div class="form-group row">
<label for="inp_Email" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_Email" name="Email" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Email" aria-describedby="inp_Email_help" placeholder="Enter Email" maxlength="45">
</div>
</div>
<div class="form-group row">
<label for="inp_DOB" class="col-sm-3 col-form-label">Date of Birth</label>
<div class="col-sm-9">
<input id="inp_DOB" name="DOB" is="dmx-date-picker" format="YYYY-MM-DD" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].DOB" dmx-bind:mindate="id_today.datetime.addYears(-90)"
dmx-bind:maxdate="id_today.datetime.addYears(-15)">
</div>
</div>
<div class="form-group row">
<label for="inp_Sex" class="col-sm-3 col-form-label">Sex</label>
<div class="col-sm-9">
<div class="form-group" is="dmx-radio-group" id="group1" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].Sex">
<div class="form-check">
<input class="form-check-input" type="radio" value="M" id="input1" name="Sex">
<label class="form-check-label" for="input1">Male</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="F" id="input2" name="Sex">
<label class="form-check-label" for="input2">Female</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="inp_PlanNum" class="col-sm-3 col-form-label">Plan#</label>
<div class="col-sm-9">
<div class="form-group" is="dmx-radio-group" id="group2" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].PlanNum">
<div class="form-check">
<input class="form-check-input" type="radio" value="793" id="input3" name="PlanNum">
<label class="form-check-label" for="input3">Plan 793</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="793X" id="input3" name="PlanNum">
<label class="form-check-label" for="input3">Plan 793X</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="inp_CertificateNum" class="col-sm-3 col-form-label">Certificate#</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_CertificateNum" name="CertificateNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].CertificateNum" aria-describedby="inp_CertificateNum_help"
placeholder="Enter Certificate Number" readonly data-rule-digits="" data-msg-maxlength="" data-msg-min="" data-msg-max="" maxlength="9">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Registration#</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_UnionRegistrationNum" name="UnionRegistrationNum" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].UnionRegistrationNum" aria-describedby="inp_UnionRegistrationNum_help"
placeholder="Enter Union Registration #" data-rule-digits="" data-msg-max="" maxlength="9" data-msg-number="" minlength="9">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" dmx-on:click="modal_PlanMember.serverconnectform_PM1.reset();modal_PlanMember.hide()">Discard</button>
<button type="button" class="btn btn-primary" dmx-on:click="modal_PlanMember.serverconnectform_PM1.submit();modal_PlanMember.hide()">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal_PmtMethod" is="dmx-bs4-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title">Payment Preferences</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="../dmxConnect/api/Cases/Upd_PM_PmtDetails.php" dmx-generator="bootstrap4" dmx-form-type="horizontal" dmx-populate="querymgr_GetCaseAndPM" is="dmx-serverconnect-form" id="serverconnectform_PM2"
dmx-on:success="modal_PmtMethod.alert_PM2.show();modal_PmtMethod.alert_PM2.setType('success');modal_PmtMethod.alert_PM2.setTextContent('Record updated!')"
dmx-on:error="modal_PmtMethod.alert_PM2.show();modal_PmtMethod.alert_PM2.setType('warning');modal_PmtMethod.alert_PM2.setTextContent('Error updating the record!')">
<input type="hidden" class="form-control" id="inp_idPMEMBER" name="idPMEMBER" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].idPMEMBER" aria-describedby="inp_idPMEMBER_help" placeholder="Enter Id pmember">
<div class="form-group row">
<label for="inp_SIN" class="col-sm-3 col-form-label">SIN</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_SIN" name="SIN" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].SIN" aria-describedby="inp_SIN_help" placeholder="Enter Social Insurance Number" required=""
data-msg-pattern="" data-rule-digits="" data-msg-maxlength="Social Insurance Number should be 9 digits" data-msg-max="" maxlength="9">
</div>
</div>
<div class="form-group row">
<label for="inp_TaxExempted" class="col-sm-3">Tax status</label>
<div class="col-sm-9">
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox" value="" id="id_TaxExempted" name="TaxExempted" dmx-bind:checked="SC_GetCaseAndPM.data.query1[0].TaxExempted.contains(1)">
<label class="custom-control-label" for="id_TaxExempted">Exempted</label>
</div>
</div>
</div>
<div class="form-group row" id="id_Preference">
<label for="inp_PaymentMethod" class="col-sm-3">Preference</label>
<div class="col-sm-9">
<select id="sel_PaymentMethod" class="form-control" name="PaymentMethod" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].PaymentMethod">
<option value="NOT SET">NOT SET</option>
<option value="CHEQUE">CHEQUE</option>
<option value="EFT">EFT</option>
</select>
</div>
</div>
<div class="flex-column" id="fc_CHEQUE" dmx-show="(sel_PaymentMethod.value == "CHEQUE")">
<h6>Enter the mailing address of the cheques</h6>
<div class="form-group row" id="id_Address">
<label for="inp_Address" class="col-sm-3 col-form-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_Address" name="Address" dmx-bind:value="querymgr_GetCaseAndPM.Address" aria-describedby="inp_Address_help" placeholder="Enter Address">
</div>
</div>
<div class="form-group row" id="id_City">
<label for="inp_City" class="col-sm-3 col-form-label">City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_City" name="City" dmx-bind:value="querymgr_GetCaseAndPM.City" aria-describedby="inp_City_help" placeholder="Enter City">
</div>
</div>
<div class="form-group row" id="id_Province">
<label for="inp_Province" class="col-sm-3 col-form-label">Province</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_Province" name="Province" dmx-bind:value="querymgr_GetCaseAndPM.Province" aria-describedby="inp_Province_help" placeholder="Enter Province">
</div>
</div>
<div class="form-group row" id="id_PostalCode">
<label for="inp_PostalCode" class="col-sm-3 col-form-label">Postal code</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_PostalCode" name="PostalCode" dmx-bind:value="querymgr_GetCaseAndPM.PostalCode" aria-describedby="inp_PostalCode_help" placeholder="Enter Postal code">
</div>
</div>
<div class="form-group row" id="id_Country">
<label for="inp_Country" class="col-sm-3 col-form-label">Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_Country" name="Country" dmx-bind:value="querymgr_GetCaseAndPM.Country" aria-describedby="inp_Country_help" placeholder="Enter Country">
</div>
</div>
</div>
<div id="cont_CHEQUE" dmx-show="(sel_PaymentMethod.value == "CHEQUE")">
</div>
<div id="cont_EFT" dmx-show="(sel_PaymentMethod.value == "EFT")">
</div>
<div class="flex-column" id="fc_EFT" dmx-show="(sel_PaymentMethod.value == "EFT")">
<h6>Enter your Bank's information</h6>
<div class="form-group row" id="id_InstitutionCode">
<label for="inp_BankInstitutionCode" class="col-sm-3 col-form-label">Bank code</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_BankInstitutionCode" name="BankInstitutionCode" dmx-bind:value="querymgr_GetCaseAndPM.BankInstitutionCode" aria-describedby="inp_BankInstitutionCode_help"
placeholder="Enter Bank institution code">
</div>
</div>
<div class="form-group row" id="id_Branch">
<label for="inp_BankTransitBranch" class="col-sm-3 col-form-label">Transit/Branch</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_BankTransitBranch" name="BankTransitBranch" dmx-bind:value="querymgr_GetCaseAndPM.BankTransitBranch" aria-describedby="inp_BankTransitBranch_help"
placeholder="Enter Bank transit branch">
</div>
</div>
<div class="form-group row" id="id_Account">
<label for="inp_BankAccount" class="col-sm-3 col-form-label">Account</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inp_BankAccount" name="BankAccount" dmx-bind:value="querymgr_GetCaseAndPM.BankAccount" aria-describedby="inp_BankAccount_help" placeholder="Enter Bank account">
</div>
</div>
</div>
<div class="form-row bg-warning mw-100" dmx-hide="(sel_PaymentMethod.value == "NOT SET")">
<h6>Date when Accounting should be notified</h6>
<div class="form-group row">
<label for="input4" class="col-sm-3 col-form-label">Notify on</label>
<div class="col-sm-9 col">
<input id="inp_EffDate" name="EffectiveDate" is="dmx-date-picker" dmx-bind:mindate="id_today.datetime" dmx-bind:maxdate="id_today.datetime.addDays(60)" dmx-bind:value="SC_GetCaseAndPM.data.query1[0].EffectiveDate"
format="YYYY-MM-DD"><small id="input4_help" class="form-text text-muted">The change will be effected by the next payday</small>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="alert fade" id="alert_PM2" is="dmx-bs4-alert" role="alert">
<p>This is a nice alert!</p>
</div>
<button type="button" class="btn btn-secondary" data-dismiss="modal" dmx-on:click="modal_PmtMethod.serverconnectform_PM2.reset()">Close</button>
<button type="button" class="btn btn-primary" dmx-on:click="modal_PmtMethod.serverconnectform_PM2.submit()">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal_CaseInfo" is="dmx-bs4-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title">Case Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>