Configuring or Modifying Complex Aptify Web Forms

You may be struggling with how to add a field to a sub-template in an existing Aptify Web form, especially a complicated one.

In this example, we will show how to update the Orders form template, by adding a field, Price Name, to the Order Details section of the Orders form.

Configuring additional fields on the Order line ELV in Aptify Web

1. Go to the Product Maintenance Application. 
2. Open the Product Types Service.
3. Open the “General” product type (or whatever product type's form you would like to modify).
4. Go to Product Type Attributes tab/dropdown.
5. Create a new (or update an existing) attribute in “Product Type Attributes” tab called 'OrderLineHtmlFunction'. This needs to point to a JavaScript function that will return the HTML to be placed within the order line table.
   1. Name: OrderLineHtmlFunction
   2. Value: Aptify.framework.utility.getConsultingInnerOrderLineHtml
6. Go to the Aptify web server, navigate to the script folder, and create a JS file under the client folder (inetpub > [wwwroot] > Aptify > script > Aptify > client). 
   1. File name - Aptify.framework.utility.extensions.js
   2. 
   3. This sample JS function returns most of the stock fields PLUS the Price Name field we are adding. It is important that the function name matches the Value of the attribute. 

   4. Aptify.framework.utility.getConsultingInnerOrderLineHtml = function (item, itemIndex)
      {
            try {
                 debugger; 
                 sRet = Aptify.applications.orders.UI.getStandardOrderLineTop(item, {
                       expandButton: true,
                       deleteButton: true,
                       editButton: true
                 });
                 //var sRetButtons = $(sRet).find(".a-order-line-buttons");
                 //$(sRet).find(".a-order-line-buttons").remove();
                 //$(sRet).find("div:nth-child(4)").remove();
                 var imagebuttons = Aptify.applications.orders.UI.getStandardOrderLine
      Buttons(true);
      
                 // added code for decimal precision
                 var decimalSqlScale = "";
                 var discountFieldMD;
                 var orderLineMD = Aptify.framework.metaData.entities.findByName("Order
      Lines");
                 if (orderLineMD && orderLineMD.fields) {
                       discountFieldMD = orderLineMD.fields.findByName("Discount");
                 }
                 var discount = item.get("Discount") == null ? "" : item.get("Discount").
      toString();
                 if (discount != null && discount.indexOf(".") != -1) {
                         var decimalPrecision = discount.length - discount.indexOf(".") 
      - 1;
                         if (discountFieldMD != null && discountFieldMD.sQLFieldScale !=
      ) {
                               if (discountFieldMD.sQLFieldScale > decimalPrecision) {
                                       decimalSqlScale = decimalPrecision;
                               }
                               else {
                                       decimalSqlScale = discountFieldMD.sQLFieldScale;
                               }
                         }
                 }
      
                 // NP: Multi Currency Support 
                 var orderLinePrice = Aptify.framework.utility.getEntityFieldFormatted
      Amount(item, "Price"); // Aptify.framework.utility.format("{0:c}", parseFloat(item.
      get("Price")))
                 var orderLineExtendedAmount = Aptify.framework.utility.getEntityField
      FormattedAmount(item, "Extended"); //Aptify.framework.utility.format("{0:c}", 
      parseFloat(item.get("Extended")))
                 console.log(item);
                 var sRetAll = " <div class='a-col1'><span>" + sRet + "</span></div>"
                 sRetAll +=
                         " <div class='a-bottom a-editable_col_container'> " +
                         " <div class='a-description a-col2'><div class='a-col-header
      -common'>Description</div><span>" + item.get("Description") + "</span></div>" +
                         " <div class='a-pricename a-col3'><div class='a-col-header header-
      common'>Price Name</div><span>" + item.PriceName + "</span></div>" 
      + // <--new line here
                         " <div class='a-quantity a-col3'><div class='a-col-header header-
      common'>Quantity</div><span>" + Aptify.framework.utility.format("{0:0.####}", 
      parseFloat(item.get("Quantity"))) + "</span></div>" +
                         " <div class='a-price a-col4'><div class='a-col-header header-
      common'>Price</div><span>" + orderLinePrice + "</span></div>" +
                         " <div class='a-discount a-col3' ><div class='a-col-header header-
      common'>Discount</div><span>" + Aptify.framework.utility.format("{0:p" + 
      decimalSqlScale + "}", parseFloat(discount) / 100) + "</span></div>" +
                         " <div class='a-extended a-col6' ><div class='a-col-header header-
      common'>Extended</div><span>" + orderLineExtendedAmount + "</span></div>" + 
                         " <div class='clear'></div></div> " +
                         " <div class='a-col7' ><span>" + imagebuttons + "</span></div>" +
                         "<div class='a-clearfix'></div>";
                 return { HTML: sRetAll };
            } catch (e) {
                 Aptify.framework.exceptionManager.publish(e);
            }
      }

7. Once the file is there, modify the 'Aptify.Framework.Configuration.External.js' file that is located under the 'script/Aptify/configuration' folder. 
   1. On that file, go all the way to the bottom and add the new file path and name to the 'Aptify.framework.configuration.clientfiles' line: 
   2. Adding the file here will make sure that our custom file gets loaded by Aptify Web and any functions we add there are available to use.
8. Regenerate the metadata for the UI part metadata record for product types and product type attribute by running PF 'Generate HTML5 Web UI Part Metadata Items'.
9. Reset IIS on Aptify Web server.

10. When you refresh Aptify Web, the new function should be called.

    1. You can add a debugger to see if it's called, and to add any more JS code. You should have access to all the order line fields.

    2. If the form columns look off, you may need to adjust the CSS in the form for the new column being added. 

11. End Result
    1. 
    2.