Query parameter for Data Detail value

Wappler General Bugs
#1

Wappler Version : 2.2.7
Operating System : Mac / php 7.2

Expected behavior

What do you think should happen?

When providing a query parameter in a url, in order to select a data detail element value, the data detail value should be set and the underlying inputs should be updated.

Actual behavior

What actually happens?

The data detail element value remains empty.

How to reproduce

  • Detail a step by step guide to reproduce the issue
  • A screenshot or short video indicating the problem
  • A copy of your code would help. Include: JS, HTML.
  • Test your steps on a clean page to see if you still have an issue

I setup the following code as a test page:

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Untitled Document</title>
  <script src="dmxAppConnect/dmxAppConnect.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
  <script src="dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <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">
  </head>
  <body is="dmx-app" id="querydetail">
    <dmx-query-manager id="query1"></dmx-query-manager>
    <dmx-data-detail id="data_detail1" dmx-bind:data="serverconnect1.data.query1" key="id" dmx-bind:value="query.order_id"></dmx-data-detail>
    <div class="container">
      <div class="row">
        <div class="col">
          <input id="text1" name="text1" type="text" class="form-control" dmx-bind:value="data_detail1.data.a_text">
        </div>
      </div>
    </div>
    <dmx-serverconnect id="serverconnect1" url="dmxConnect/api/get_texts.php"></dmx-serverconnect>
    <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>
  </body></html>

35%20PM
Screen Shot 2019-10-03 at 12.15.35 PM.png974×1012 66.6 KB

46%20PM
Screen Shot 2019-10-03 at 12.15.46 PM.png844×226 8.03 KB

If I replace query.order_id with an actual id value, then everything works as expected.

#2

I think you need to add the input parameter ‘order_id’ in the server connect properties.

#3

Thanks for the idea Tom, but that’s not my understanding of how a data detail works, and is not how I’ve been using it without query parameters. Isn’t the point of a data detail to allow you to select a single record from a server connect data set that has already been retrieved, thus reducing server queries?

#4

You’re right. I actually use Data Detail a lot - but probably only with modals. I don’t think I use the Value. I just put the primary key in Key.

#5

Data detail is used with a repeat region you have on the page. On click of your repeat region items, you use dynamic events to control the data detail and select the clicked record.
And yes, you use the primary key in the key field. You also use the primary key when applying the control data detail dynamic event.

Everything is explained here:

#6

Thanks Teodor, understood. So you can’t use a query parameter to set the value? I have a modal working, with a data detail inside of it, and upon selecting a row from outside the modal, the modal is opened and data detail is set. All good there. I just want to be able to add a query parameter and go directly to this page with the modal open and displaying that record. I can get the modal open based on query param, but can’t get the data detail to set.

#7

@Teodor If you have a minute, I’m still interested in this…Can I use a query paramter to set the value of a data detail element?

#8

Just tested this and it works.
What value are you passing with the URL param? Is it an ID/number? If yes, don’t forget to add .toNumber() to the expression (use the Convert > To Number formatter):

Screenshot_44
Screenshot_44.jpg554×648 80.5 KB

1 Like
#9

Yes, of course…toNumber(). Thanks @Teodor

1 Like