Skip to Content

Button Control

Button controls allow you to place a control on a panel that appears like a button, and offer configuration options to control placement location, behavior on click (if desired), color, label, and more.

If additional control is desired over the look and feel of a Button, Vinyl supports this through Styles.

How To Configure a Button Control

  1. From the app view, go to Action Drawer > Live Designer
  2. If the Button should be associated with an underlying Column, select the value
  3. Set the Control Type to Button
  4. Assign a Name. This value will appear on the Button itself.

  5. Select Control Subtype value to define if Button should be Primary or Secondary in appearance.

    1. Primary = appears as a main button on panel
    2. Seondary = appears as a secondary button on panel, lighter than a primary button

  6. Click Next

  7. If the Button should Execute an Event on click, select the appropriate event
  8. If the Button should Link to Page on click, select the appropriate page
  9. Click Next
  10. Review the updates Vinyl will make when adding the Button control and click Finish

  11. If a different Location is desired for the Button placement, select the appropriate value

    1. Body = default behavior which typically displays inline on the Panel
    2. Header = displays in the header region of the Panel, defaults to the right-hand region of the panel
    3. Panel (Menu) = displays in a nested menu that displays on Panel, top right region of Panel
    4. Toolbar = displays in the toolbar region of the Panel, defaults to the right of any existing Update Method buttons (e.g., Create, Audit)

  12. Review the available options and make any further configuration updates

  13. Click Save

How to Style a Button

Styles can be used to further customize a Button control. Use the available Styles to change things like Button size, color, and font weight. You can customize a Style if further granularity is needed.

  1. Navigate to the app page with the Button control
  2. Go to Action Drawer > Live Designer
  3. Select the Button control from the page view
  4. From the edit region, go to More... > Styles
  5. Click + Style
  6. Select Buttons from Style Categories
  7. Locate the desired Style and click the corresponding + Add button. For example: Vinyl - Button Large Type
  8. Exit out of the Styles and edit screens, refresh the browser and confirm updates

Button Location Options

Button controls can be configured to be placed in 4 different areas on a panel using the Location field. Placement is defined by the Location option selected in the control edit mode. Areas Buttons can be placed on Panels include:

  1. Body = default behavior which typically displays inline on the Panel
  2. Header = displays in the header region of the Panel, defaults to the right-hand region of the panel
  3. Panel (Menu) = displays in a nested menu that displays on Panel, top right region of Panel
  4. Toolbar = displays in the toolbar region of the Panel, defaults to the right of any existing Update Method buttons (e.g., Create, Audit)

buttonlocations.png

Illustration of different Button Locations available in Vinyl