Button Bar enables to add buttons to button bar of the App. Buttons Button Bar enables to add buttons to button bar of the App. Buttons are classified as Positive and Negative buttons and allows users to configure directly under positive and negative tabs.
In the subsequent steps, let's look at the details for configuring buttons to Button Bar:
- Click the Visibility icon of the Button Bar to enable the visibility of Button Bars shown in the following screen shot.
- Click Configure Button Bar.
.png?version=1&modificationDate=1586325337670&cacheVersion=1&api=v2&height=400)
Provide the Button Bar configurations based on the description provided in the following table:
Note Configuration descriptions are same for both positive and negative buttons.
.png?version=1&modificationDate=1586325374795&cacheVersion=1&api=v2&height=400)
#
Field Name
Description
Sample Values
1 Button Display Name
Label key of the localized text, which will appear as button name.
SUBMIT
2 Button Id
Unique ID for the button.
POSITIVE_ACTION
3 Product Code
Select the Product Code for the button. The users who are authorized to this product can only view and use the button in this app.
To add new entitlement details, make an entry of the product code (in OD_PRODUCT_CODE column) in OD_PRODUCT_MASTER_MB and OD_FUNCTION_PRODUCT_MAP_MB tables in database.CUSER
4 Sub Product Code
Select the Sub Product Code within the Product for the button. The users who are authorized to this sub product can only view and use the button in this app.
To add new entitlement details, make an entry of the sub product code (in OD_SUBPROD_CODE column) in OD_PRODUCT_MASTER_MB and OD_FUNCTION_PRODUCT_MAP_MB tables in database.CUSER
5 Function Code
Select the Function Code within the Sub Product for the button. The users who are authorized to this function can only view and use the button in this app.
To add new entitlement details, make an entry of the function code (in OD_FUNCTION_CODE column) in OD_FUNCTION_MASTER_MB and OD_FUNCTION_PRODUCT_MAP_MB tables in database.VSBLTY
6 Label
Indicates the label key of the localized text, which is assigned as the button name.
Selected: The label key will appear.
De-Selected: The label key will not appear.
Selected 7 Icon
This option allows you to choose an icon for the button.
Selected: The icon will appear.
De-Selected: The icon will not appear.
To select an icon for the button, perform the following steps.
1. After entering relevant values for the fields of Button Display Name, Button ID, Product Code, Sub-Product Code and Function Code, proceed to click the option of Icon.
%20-%202.png?version=1&modificationDate=1586326481740&cacheVersion=1&api=v2&width=872)
2. The options, Left and Right indicate the position of the icon. On selecting Left, the icon gets placed on the left side of the button, whereas, if Right is chosen, then the icon will get placed on the right side of the button. Select any one of the options.
%20-%202.png?version=1&modificationDate=1586326545338&cacheVersion=1&api=v2&height=400)
3. Choose a button style and proceed to click Create.
%20-%202.png?version=1&modificationDate=1586326587025&cacheVersion=1&api=v2&height=400)
4. Click the newly created button bar, e.g. SUBMIT.
%20-%202.png?version=1&modificationDate=1586326636456&cacheVersion=1&api=v2&width=759)
A screen, comprising of various icons appears.
%20-%202.png?version=1&modificationDate=1586326675609&cacheVersion=1&api=v2&width=402)
5. Default, Active and Disabled are the three available options, categorized under the field, Choose icons for different state. To find an icon, type the name of the icon in the Search box to find it. You can assign separate icons for the three different states of Default, Active and Disabled. Default indicates the default icon of the button bar, whereas Active and Disabled depict the active and disabled states of the button. When the button gets clicked, the chosen icon for Active state gets displayed and similarly, the icon, chosen for Disabled state, gets displayed, if the button is in a disabled state.
%20-%202.png?version=1&modificationDate=1586326726867&cacheVersion=1&api=v2&width=399)
6. For customized icons, click Custom tab.
.png?version=1&modificationDate=1586326772995&cacheVersion=1&api=v2&width=403)
7. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly.
8. After selecting the image, provide unique names for Class Tag and Search Tag. The Image Name gets assigned automatically. In case, if you wish to change the Image Name, then you can modify it. The name, which you provide in Search Tag, will be detrimental, when you perform a search. Use the name, provided in the Search Tag to find the customized icon. Click Ok to upload the customized icon.%20-%202.png?version=1&modificationDate=1586326815210&cacheVersion=1&api=v2&width=401)
_MB tables in database.
VSBLTY
6 Label
Indicates the label key of the localized text, which is assigned as the button name.
Selected: The label key will appear.
De-Selected: The label key will not appear.
Selected 7 Icon
This option allows you to choose an icon for the button.
Selected: The icon will appear.
De-Selected: The icon will not appear.
To select an icon for the button, perform the following steps.
1. After entering relevant values for the fields of Button Display Name, Button ID, Product Code, Sub-Product Code and Function Code, proceed to click the option of Icon.
2. The options, Left and Right indicate the position of the icon. On selecting Left, the icon gets placed on the left side of the button, whereas, if Right is chosen, then the icon will get placed on the right side of the button. Select any one of the options.
3. Choose a button style and proceed to click Create.
4. Click the newly created button bar, e.g. SUBMIT.
A screen, comprising of various icons appears.
5. Default, Active and Disabled are the three available options, categorized under the field, Choose icons for different state. To find an icon, type the name of the icon in the Search box to find it. You can assign separate icons for the three different states of Default, Active and Disabled. Default indicates the default icon of the button bar, whereas Active and Disabled depict the active and disabled states of the button. When the button is clicked, the chosen icon for Active state gets displayed and similarly, the icon, chosen for Disabled state, gets displayed, if the button is in a disabled state.
6. For customized icons, click Custom tab.
7. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly.
8. After selecting the image, provide unique names for Class Tag and Search Tag. The Image Name gets assigned automatically. In case, if you wish to change the Image Name, then you can modify it. The name, which you provide in Search Tag, will be detrimental, when you perform a search. Use the name, provided in the Search Tag to find the customized icon. Click Ok to upload the customized icon.
Note If you upload a customized icon for the button bar, ensure that you restart the app server, after saving the app (widget). Make sure to log out from Canvas Studio and close the Studio application, before restarting the app server. If you do not restart the app server, the uploaded custom icon will not appear as the assigned icon for the selected button bar.
.png?version=1&modificationDate=1586326863572&cacheVersion=1&api=v2&width=401)
9. To edit the configurations, associated with the button bar, click
icon, whereas to delete the button bar, click 
icon. %20-%202.png?version=1&modificationDate=1586327103333&cacheVersion=1&api=v2&width=758)
Selected 8 Left - Right
Indicates the position of the icon. If the option Left is selected, the icon will appear on the left side of the button, whereas on selecting Right, the icon will appear on the right side of the button. Left 9 Button Styles
Indicates the style of the button. 
10 Create
Click Create to create the button (Positive or Negative).