To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe
Next lesson:
JavaScript Libraries

Custom Controls

Lesson 9: Events

Events and server actions are similar, so it’s important to understand the differences. Technically you can use either interchangeably, but:

  • Events
    • Mainly used for the server to interact with actions that happen on the client
    • When an event is generated it will also generate pgServerOn.. and psClientOn… for you when declared in JavaScript
  • ServerActions
    • Have an extra parameter: tWebValueTree
    • It is mainly used when sending and interacting with data


  1. Open cWebMsgBuilder.pkg in the DataFlex Studio
  2. Create the event that will be called on. 
  3. The goal is that when the ‘Add’ button is pressed an event is sent to the server that includes the information that has been entered into the field
    { MethodType = Event }Procedure OnAddBtnClick String sVal
          //Augment with application logic

  4. Add code to publish the event to make it callable from the client
    WebPublishProcedure OnAddBtnClick

  5. To create the event at the client in the JavaScript code, open WebMsgBuilder.js in the text editor
  6. First declare the event
    // Events
    this.event(“OnAddBtnClick”, df.cCallModeWait);

  7. Fire the event by expanding the doAddMessageItem function
    if (bOk && this.pbServerOnAddBtnClick) { “onAddBtnClick”, [sVal]);

  8. The pbServerOnAddBtnClick is automatically generated on the client, but needs to be manually created on the server
  9. Open cWebMsgBuilder.pkg in the DataFlex Studio
  10. Create a new property Boolean
    {WebProperty = Client}
    Property Boolean pbServerOnAddBtnClick False
  11. It’s set to false because it’s not something that is always meant to happen
  12. Open Dashboard.wo in the DataFlex Studio to implement this in the application 
  13. Open the object properties in the ‘Properties’ panel on the right for the webMsgBuilder
  14. Under ‘Web Property,’ set ‘PbServerOnAddBtn’ to “True”
  15. Click the ‘Events’ tab
  16. Double click the ‘OnAddBtnClick’ to augment it in the code
  17. Add code…
    Send ShowInfoBox (“Add button was clicked with value: “ + sVal)
    “Add button clicked!”

  18. Select the run icon from the top toolbar
  19. Open the application in the web browser: localhost/WebmessageBuilder/
  20. Refresh the screen (F5)
  21. Enter a value into the field and click the ‘Add’ button. The ‘Add button clicked!’ info box should appear showing the entered value.