Fonteva allows you to configure customized Buttons within your Fonteva app.

For example, Salesforce does not disable buttons once they've been clicked by default. However, Fonteva allows you to add a spinning feature to your application's Buttons to indicate the system is busy once a Button is clicked. This disables the Button and prevents multiple submissions of the same data, such as multiple credit card submissions for the same transaction.

By default, Salesforce uses only two button types - neutral and brand. Brand is blue with white letters and Neutral is white with blue letters. Typically, Brand is used for Submit while Neutral is used for Cancel. You may use a custom button type by providing Fonteva with your custom CSS classes.

Your Button can also be part of a group. For example, If you want five Buttons to be disabled at the same time, you can group them together. If one event (e.g. clicking one of the Buttons) is fired, all five Buttons are disabled.

You can also disable this feature.

Configurable Attributes

  • label – Name of the Button (e.g., submit, save).
  • name – Name of the form (You can use it for Submit Form, but Fonteva itself doesn’t use forms).
  • value –  Specifies the initial value in a form (You can use it for Submit Form, but Fonteva itself does not use forms).
  • type – The type of button you wish to render (e.g. Brand, Neutral)
  • group – Name of the Button group. 
  • additionalClasses – You can provide your own CSS classes for your custom Button type. Leave this attribute blank to use the default Salesforce types.
  • onClickAction – This defines the action taken when a user clicks your Button. The controller action sent to Fonteva's Framework calls your component action. Even though the action is initiated in a different managed package, it still executes the action in your managed package.
  • dataAttributes – If you want to use HTML5 attributes, you provide a map as a key-value pair. dataAttributes is used to store custom data private to the page or application. This attribute gives the ability to embed custom data attributes on all HTML elements. The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries). See * HTML Attributes for more information. 
  • disabled – Entering True for this attribute disables the Button. Entering False enables it

  • imageSrc – Places an image on the left side of the Button.

    You can also display an image without text.

  • lightningIcon – Choose your image from these Icons. These are SVG images. You can change the color and resize them.

    Example

    <aura:component>
    <lightning:icon iconName=action:approval size=large alternativeText=Indicates approval/>
</aura:component>
    JS

    See lightning:icon for more information.

  • lightningIconSize – The size of your Lightning Icon. Choose from xx-small, x-small, small, medium, or large.
  • lightningIconVariant – The variant changes the appearance of a utility icon. Accepted variants include inverse (white), warning (yellow), and error (red). Use the inverse variant to implement a white fill-in utility icons on dark backgrounds.

  • enableProgressIndicator – This enables the progress indicator for your Button. Enter True to enable the progress indicator. Enter False to disable it.

    If you have a neutral Button and that Button is the default white, the progress indicator won’t be seen.

For more information on required Aura methods, see Button in Fonteva's Dev-Docs.