Moving an item from one Table to another

I had a chance to create a FEB app for a customer facing shopping / cart style of interaction.   Catalog items are searched and results are presented in a table.  Details on any item can be seen by clicking on one of the search results.  Users can the specify how many they want and add it to their shopping cart. The order is generated upon submit and a confirmation is presented and emailed.

Download the app here ->   ShoppingCart&Catalog (3).nitro_s

The attached application contains two apps.  The first one - Catalog - is for entering items into the catalog.  The second one - Order Experience - is the customer facing shopping cart application.  This app will draw on what every is in the catalog.

To use this application you will need javascript security off (trusted developers).  

You will need to delete and reattach the image & pdf files in the catalog db.  Click the "download" and "x" on the attachment widget in "view results" for each catalog entry and then re-attach them and save each record.   This is necessary for the URLs to be re-created and saved with with your domain information.

Techniques that this application illustrate include:

Search by operator  (equals, notequals, lt, lte, gt, gte, startswith, endswith, contains).  The example shows how you search the catalog with any "startswith" set of characters.  It also lets you search on item name "contains" any set of charters.  

How it works: Look at the service mappings "APHIS / Catalog / Search" and you will see that each search Input is paired with a "by operator".  The operators (equals, notequals, lt, etc..) are mapped as a "constant".

Pass a field value from a table to the main form and then use it to retrieve details.  Details for the selected table item are displayed in a section on the main form.  This is a 2 step process and one that can be used in many scenario  (tasklist, summary and drill down, etc..).

Step 1:  Get the REC ID of the slected item - The catalog search results table onClick event has the following Javascript which gets the Record ID (F_Paragraphtext0) from the selected record in the table and passes it to REC ID on the main page (F_Paragraphtext1).
var selected = item.getSelection();
if(selected === null)
   return;
 BO.F_Paragraphtext1.setValue(selected.F_Paragraphtext0.getValue());

Step 2:  Retrieve and load the details for the selected record. - The REC ID onChange event triggers the catalog retrieve for the ID of the selected item and load the results into the form.  Some of the results are loaded to a hidden page and "echoed" into the details section of the the order experience via text widgets.

Moving field values from main form to a second table (dynamic table add via javascript).  The "add to cart" button transfers your current selection to the shopping cart table.  This is done by some JavaScript which is tied to the button's onClick event.  The code gets the details for the item and loads them into an array  and then adds the array as a new line in the shopping cart table.  The order of the field in the table needs to match the order of the items in the array.

// Get the values from the main form
var field1_value = BO.F_SingleLine7.getValue();
var field2_value = BO.F_SingleLine3.getValue();
var field3_value = BO.F_Paragraphtext2.getValue();
var field4_value = BO.F_SingleLine4.getValue();
var field5_value = BO.F_Paragraphtext3.getValue();
var field6_value = BO.F_SingleLine8.getValue();
var field7_value = BO.F_Number0.getValue();
 
// Set reference to table (business object)
var tbl = BO.F_Table0;
// Create a new row object
var newRow = tbl.createNew();
// Get array of columns
var newCols = newRow.getChildren();
 
// Set the column values
newCols.get(0).setValue(field1_value);
newCols.get(1).setValue(field2_value);
newCols.get(2).setValue(field3_value);
newCols.get(3).setValue(field4_value);
newCols.get(4).setValue(field5_value);
newCols.get(5).setValue(field6_value);
newCols.get(6).setValue(field7_value);
 
// Add the row to the table
tbl.add(newRow);

Storing an image (or PDF) attachment in one app and displaying the image (or download link) in another app.  This provides a rich and informative shopping experience.   It is also an easy  way to provide download access to catalog of attachments.

The onChange events in each of the catalog attachment widgets uses the following JavaScript to create the attachments URL.

// create the base url
var x = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
var url =  x + "/forms/secure/org/run/service/ContentStorageService/";

// get the attachment ID and add it to the URL and set a field to its value
if(BO.F_Attachment.getValue().id)
   BO.F_Paragraphtext1.setValue(url + BO.F_Attachment.getValue().id);

The Order experience app retrieves the attachment URLs when a search result is selected and puts it on the hidden page.  When the URL changes (onChange event)  the image widget on the shopping page is set to it with this line of JavaScript.

app.getForm('F_Order').getPage('P_NewPage').F_Image0.setURL(item.getValue());

Using CSS to style fonts, buttons and more.  The app has a polished look and is also responsive.  The form size, colors of buttons, print settings and more are set in the CSS.  You can view and download these settings by inspecting the runtime web pages with your browser.  I also use custom class tags with images, pages and text widgets.