Setting up Bindings and Features on the MUI Button

How to set up Bindings and Features on the MUI Button component in Quest

Note: You’ll see a reference to the “use hook” file in this documentation. When you export your component in Quest, say “MyCatalog”, we generate two files. One is the presentation layer which is named “MyCatalog.tsx” and the other one is the “use hook” file named “useMyCatalog.ts”. It’s the “use hook” file where the developers will add all applicable logic

Bindings

Text Binding:

There are four ways to set the Text value of a button:

1. Literal value: As shown below, you can type in the hard-coded value to display as the button text:
2. Prop value: Assign a prop value that can be passed down from the parent component:

   • Step 1: Set the binding on the button to retrieve the text of the button from the “name” attribute of the “productinfo” prop object. You can also have the “productinfo” be a simple string instead of an object
   • Step 2: Set the “productinfo” prop at the component level. This will allow the parent component to pass the “productinfo” object to the nested components

     
   • Step 3: Pass the “productinfo” object from the parent component in the “Nested Prop Values” setting
3. Data variable: Assign a value to be derived from the data variable which can be set and returned in the “use hook” file as below:
4. Function Call: Call a function that can be modified to return a dynamic value for the button label: Specify a function and modify what the function returns in the “use hook” file

Visible Binding:

Similar to the Text binding, you can set the Visible binding using one of the methods below:

1. Boolean (pass true or false)

2. Set the Prop binding like “props.isVisible” and pass this value from the parent component. If you are using Props to set multiple bindings such as both “Text” and “Visible” bindings, then below is how the settings would look like at the Button level of the nested component: Below is how you need to pass the Prop value from the Parent component to the nested component using the “Nested Prop Values” setting on the nested component:
3. Data binding such as data.isVisible and set this in the use hook file

4. Function calls such as fns.isButtonVisible() and add logic to the isButtonVisible function in the “use hook” file.

Color binding:

Future implementation

1. While the Color binding on the button is exposed, the setting is reserved for future implementation in Quest. Use the desired Button Variant from MUI

Disabled binding:

There are four different ways to set this binding, very similar to Text and Visible bindings

1. Boolean (pass true or false)

2. Set the binding to “props.isDisabled” and pass this from the parent component in the “Nested Prop Values” setting
3. Set the binding to “data.isDisabled” and set this in the “use hook”

4. Function call such as fns.isButtonDisabled() and modify the logic in the “use hook” file

Loading binding:

There are four different ways to set this binding, very similar to the Text and Visible bindings.

1. Boolean (pass true or false)

2. Set the binding to “props.isLoading” and pass this from the parent component in the “Nested Prop Values” setting
3. Set the binding to “data.isLoading” and set this in the “use hook” file as shown below
4. Set the binding to a function call such as fns.isLoading() and modify the “use hook” to return the boolean to display loading

Loading Position binding:

This controls the position of the loading indicator, the little spin wheel. You can refer to the MUI Loading Position API docs for acceptable valuesThere are four ways to set this

1. Pass a literal value in the binding such as “start”, “end”, or “center”

2. You can set the prop value such as “props.loadingPosition” and pass it form the parent component

3. Set the binding to “data.loadingPosition” and add the logic in the “use hook” file to return ”start”, “end”, or “center” values
4. Set the binding to a function call such as fns.getLoadingPosition() and add logic to that function in the “use hook” file to return the desired position “start”, “end” or “center”. The “start” value will position the spinning wheel towards the left end of the button

aria-label binding:

There is only one way to set this binding. Set it to a literal string with quotes such as “large-submit-buttton” or something meaningful/relevant that can be interpreted and read out loud for the user by the screen readers or such assistive technology.

onClick binding:

Set this binding to a call a method such as fns.handleSubmit and add logic to this method in the “use hook”

Features

Tooltip:

There are two ways to set the tooltip feature. Either as literal text or use another component

1. Text: Set the fields such as Text, Placement such “top”, “bottom”, “bottom-start”, etc (See tooltip MUI API documentation for more information), Show Arrow, Max Width

2. Component: Instead of a literal text for tooltip, you can also use another custom component to render as a tooltip and set the below attributes to control the behavior of the tooltip:

   1. Component: name of the component such as CustomTooltip

   2. Component Props: Props to pass to the component that can be leveraged within the custom tooltip component to display the tooltip text, etc. Example: tooltip={“Component Tooltip”}

   3. Placement, Show Arrow, and Max Width similar to the “Text” option

List:

The list feature can be used to create a repeating set of buttons iterating over an array or any other collection of items. To leverage the List feature, you’d actually apply the list on the Frame that’s encompassing the button. Technically, the List feature is not something you’d set directly on the Button but rather on the frame encompassing the button. Please refer to this detailed guide on how to creating a repeating list of buttons to leverage the List feature

Dialog:

The dialog feature can be used to invoke a modal dialog box when the user clicks a button. This feature is not directly set on the Button but rather on another component that’ll function as a dialog box and the rendering of the dialog box can be controlled from the Button on-click binding function call. Please refer to this detailed doc on how to display a dialog box upon button on-click

File Upload:

Use this feature to display the File Open dialog box, giving the user an option to select files to upload to your application. You can set the below properties to control the behavior of the File Upload dialog box

1. Multiple: Set this to a boolean (true or false) or derive the value from either a prop or a data attribute. This will allow you to control the ability to upload one or multiple files

2. Accept: Set this to filter the list of files available for the user to select such as “.pdf,.png” by comma separating the file extensions enclosed in quotes as shown above. It’s not a hard control because the users can still click on the “Options” button in the File Open dialog and change the format from “Custom Files” to “All Files” to select any of the available files in that folder.
3. On Change: Set this to the method where you can write your logic for handling the files that the user has selected for upload. You can modify the logic for this method in the “use hook” file

Radio Group:

This feature is not applicable for the Button component.

Badge:

Leverage the Badge feature to enable a small informational circle on the Button to display additional information. For example, If you had a button called “View Alerts” and you wanted to convey to the user quickly on the number of new alerts without actually to drill down into the “View Alerts”, you could do so like below by leveraging the Badge feature on the button

1. Please refer to the MUI Badge API documentation for more information on how to properly set the Badge properties

2. Color defaults to ‘primary’ and Variant defaults to ‘standard’ but you can override

3. Be mindful of the “Invisible”. It’s counterintuitive. Typically MUI API should’ve defined that property as “visible” and we’d expose it as such. But since they have it as “Invisible”, we extend the same so you’d have to set this to “false” to show the badge or “true” to hide the badge.

Popover:

You can take any custom component and use it as a popover feature over another component. For example, let’s say you have a feedback button or a buy button and you want to invoke a helpful popover as next action or just as informational text, you can associate the popover custom component to your feedback or buy button. Here is how it’s done and there is more explanation in our docs. You’ll need two things to try this out. Have a custom component that’ll function as a popover. Have a button or something else where you can anchor this popover to display on some user action such as hover or submit. The below settings should be done on the Popover component:

1. Anchor EL: Set this to props.AnchorEl or something similar and pass the component name in the prop values that’ll render this Popover based on the user action

2. Anchor Origin: Refer to MUI API Docs for popover

3. Transform Origin: Refer to MUI API Docs for popover

4. Open: Pass in a boolean value either derived from the prop or from data. For example define it as data.openPopover and then control the value of the openPopover in the “use hook” file like below

import { useState } from "react"; 

const useMuiButtonPropsAndBindings = () => {
 let data: any = {};
 
 const [openPopover, setPopover] = useState(false);
 data.openPopover = openPopover;
 const isButtonDisabled = (): any => {};
 const isLoading = (): any => {};
 const handleSubmit = (): any => {
   setPopover(true);
 };
 const handleClosePopover = (): any => {
   setPopover(false);
 };

1. On the button that’ll invoke this popover, add the handling logic to set the popover value to true either on-click or on hover action by the user

2. On Close: Add a function to set the data.openPopover to false

3. When you are all done and execute the code, you can produce something like below for the “Delete Me” button click. Quest has a bunch of popovers created in our 150+ Auto-layout components samples (Look in popover page) so you can copy them and modify them to your needs.