Web Connection
Grid alternative - Displaying and allowing user input into a child object
Gravatar is a globally recognized avatar based on your email address. Grid alternative - Displaying and allowing user input into a child object
  Chris Jewell
  All
  Jul 4, 2019 @ 04:31am

I'm unsure what the best practice is for the following scenario:

I have a parent object called 'Orders' with a child object called 'Order_Items', I need the user to enter a value against each child entry. In VFP I would use a grid to display the related child rows and allowed the user to enter values for certain fields against each child row.

In WC so far, I have created business objects for all the data and a script that displays all the header data but, how would I handle displaying the child rows and input against each child row and how do I make sure each line is binding to the correct record in my table, bearing in mind some orders may have 1 item and other orders 20+ items.

I'm sure there is an obvious answer which I have not yet found\understood so apologies for the simplicity of my question, I'm still finding my feet with WC.

Any advice or help would be greatly appreciated.

TVM, Chris

Gravatar is a globally recognized avatar based on your email address. re: Grid alternative - Displaying and allowing user input into a child object
  Rick Strahl
  Chris Jewell
  Jul 5, 2019 @ 03:36am

For display you can just nest the data with a nested SCAN or FOR loop along with some logic that selects the proper cursor and query data:

<div class="order-header">
   <%= Order.OrderNumber %> - <%: Order.Customer.Company%>
</div>
<div class="order-line-items">
   <table>
     ...
   <%  SELECT * from LineItems where OrderId = Order.id INTO CURSOR TLineItems
       SCAN 
   %>
      <tr>
           <td><%= TlineItems.Sku %></td>
           <td><%= TLineItems.Description</td> 
     </tr>
   <% ENDSCAN %>
</div>

For data entry things are a bit more complicated though. There are two choices there:

  • Open or Pop up a new Tab and allow editing the new data separately (or in the same tab and then go back)
  • Use dynamic editing via AJAX callbacks

The former would just be another separate form that's opened and edited using business objects for the particular lineitem.

The latter requires using some client side tools like jQuery or Vue to handle the UI in the browser and making service callbacks to the server to update the data when saved. The latter is more interactive, but requires a different approach as you basically create your UI in JavaScript and handle the data via a server callback. With this approach you might also render the detail data using client side tooling. Vue is particularily good for this as you can easily set up databinding for list data and keep the display and input data in sync. But at the end of that you always need to update the data on the server by sending it to the server for processing and validation.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Grid alternative - Displaying and allowing user input into a child object
  Chris Jewell
  Chris Jewell
  Jul 5, 2019 @ 04:27am

Thank you Rick, I'll give that a whirl 😃

Gravatar is a globally recognized avatar based on your email address. re: Grid alternative - Displaying and allowing user input into a child object
  FoxInCloud Support - Thierry N.
  Chris Jewell
  Jul 8, 2019 @ 05:32am

Hi Chris,

You can also use WC-based FoxInCloud as shown in this demo.

After you adapt your desktop application to the Web using the FoxInCloud Adaptation Assistant, FoxInCloud generates a grid similar to the VFP grid and takes care of everything for you: set up the proper record, get the user input and transmit it to the related .controlSource.

(to enter into a grid cell, type F2 and/or type directly your value)

As demo'd, FoxInCloud supports all kinds of .recordSource (table, cursor, view, CAD, local and remote) and buffering (none, record, table). The demo shows that you can even switch .recordSource at run time.

You can also view the form's source code on line

Gravatar is a globally recognized avatar based on your email address. re: Grid alternative - Displaying and allowing user input into a child object
  Chris Jewell
  FoxInCloud Support - Thierry N.
  Jul 8, 2019 @ 09:14am

Thank you for responding Thierry, Rick's suggestion has worked for my needs, but I will take a look at FoxInCloud 😃

Gravatar is a globally recognized avatar based on your email address. re: Grid alternative - Displaying and allowing user input into a child object
  FoxInCloud Support - Thierry N.
  Chris Jewell
  Jul 8, 2019 @ 12:24pm

FWIW, FoxInCloud generates the HTML, CSS and JS from the elements building your VFP desktop app., using the same structure, data access and UI principles; you no longer need to write all the bolts and nuts in HTML/CSS/JS, you can just override/complement the FoxInCloud behaviour whenever you need something specific.

FoxInCloud replaces the desktop UI by a responsive HTML UI (using Bootstrap) so that users can both capitalise on their experience with the desktop app and enjoy a fresh and modern responsive HTML UI.

Once you've understood the basics of adaptation (modal call-back, form.Init(), reporting), you can save a lot of dev. time with FoxInCloud.

© 1996-2024