Creating Special Events and Styling

Previous:  Custom Pages in Vivaldi

 

Drilling from a Table to Another Form

You can define a drill behavior where users can click a cell in your tabular forms and navigate to another form you specify (table or detail) and immediately filter to a related value.  For example, you may want users to be able to click on a customer name in your Orders table to then view the customer detail, or a list of the customer's contacts or orders. 

  1. Click on the Wizard next to the Click Event property in the Form Item detail screen.
  2. Speciify the source field in your table that contains the value you want to drill by.  Important:  Make sure your field is an item defined for your tabular form, even it is hidden.  For example, you might have an identifier field you don't need users to see, but if it contains the drillable value (e.g., customer ID), make sure to add it and hide it on the tabular form.
  3. Specify the form you want users to be taken to.
  4. Specify the corresponding target field on the target form that will be used to filter values based on the source field from step (2).
  5. Choose whether you want to send the user to the full-page form, or just show it in a popup window.
  6. Click Apply to close.
  7. If you want the values in the table to have an underline indicator that the user can see the value is clickable, enter 'tablelink' into the CSS Classes property.
On This Page

    Controlling Button Click Events

    You can add buttons to your Detail Forms by adding a new item and selecting "Button" for the display type.
    1. In the Click Event add the name of the event you want to call, such as MyClick()
    2. In your /js/customer.js file, add a new event MyClick() and define the behaviour you want to call.
    3. To access other controls on the form, it is often easiest to assign those controls a CSS Class to reference, as each control on the form has a unique name that will be different each time the form opens (to prevent multiple instances of the same form being open causing issues).

    Example button click event

     

    Other Events (Dropdown changes, etc.)

    Custom events can applied to the application as a whole, or individual controls.  To apply an event to an individual control, use the "Click Event" setting for any form item to call a custom javascript event that you define in the customer.js file.  The customer.js file is in the /js/ directory of your Vivaldi deployment.  To apply a general event using javascript or jquery universally to Vivaldi, you can use the customer.js file as well.  It will not be overwritten during an upgrade.  Alternatively, you can also bind events to a CSS Class you assign to a control.  Examples are provided in the customer.js file.

    Using jQuery Events

    jQuery is fully supported, and we recommend you use noConflict() in most cases to ensure any pages or script you create will function correctly.   For example, if you need to call your own custom jQuery events, you can use the following:

    var j = jQuery.noConflict();
    $j("yourreference")...  

    This will ensure there are no collisions with jQuery between forms. If you encounter difficulty, you can try to use $ogidx as the jQuery reference, which is established in the global index file.

    Custom Styles

    Custom styling can applied to the application as a whole, or individual controls.  To apply a style to an individual control, use the "CSS Classes" setting for any form item.  To apply style overrides universally to Vivaldi, you can modify the customer.css file that is in the /styles/ directory of your Vivaldi deployment. It will not be overwritten during an upgrade.