Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    ProCode frontend logic- Typescript

    ProCode frontend logic- Typescript

    1 Context:

    🧠
    In this example, we will adjust the results of a dynselect by specifying custom filters at runtime using TypeScript client logic.

    2 Step by step guide:

    1. Navigate to “Design” –> “Screens” and open the TrainingDay5_OrderOverview screen
    2. Launch the OrderForm_Training_Part5 form by clicking on the gear icon in the designer tree and selecting ‘Open Object Master’
    3. We will create an event namespace file, scoped to the form object, by using the Open events file button in the designer
    4. The event namespace file is registered in the designer, by assigning the Namespace attribute with the # value to the OrderForm_Training_Part5 form object (NOT the instance)
    5. Add a function to the event namespace that will handle the filtering on the CustNum dynselect:
      6. export function onBeforeFetchCustNum(custNumSelect: akioma.swat.DynSelect) {
  const form = custNumSelect.form;
  const salesRep = form.getScreenValue('salesrep');
  if (salesRep) {
    custNumSelect.addFilter('salesrep', '=', salesRep, true);
  }
}
    6. Reference the event on the CustNum dynselect by selecting it in the designer and assigning the BeforeFetch attribute with the #.onBeforeFetchCustNum(eventSource) value
    7. Adjust the result display template to include the salesrep value, for better visibility; this is done by changing the List Design Fields attribute to 'fad fa-align-justify'|salesrep|
    8. Do a hard reload of the browser page, to clear the browser cache and launch the TrainingDay5_OrderOverview screen, now the CustNum dynselect will always filter by the order’s salesrep value

    Example Code: 

    export function onBeforeFetchCustNum(custNumSelect: akioma.swat.DynSelect) {
  const form = custNumSelect.form;
  const salesRep = form.getScreenValue('salesrep');
  if (salesRep) {
    custNumSelect.addFilter('salesrep', '=', salesRep, true);
  }
}

    3 Explanation:

    ☝
    When integrating custom frontend logic, there are no limits to creativity. The given example may be very simple, but is solely meant to exemplify the ease of use. Much complexer logic can also be integrated using these priciples mechanics. Complex validations can be implemented with ease, for example.
    Logo