> For the complete documentation index, see [llms.txt](https://docs.centara.online/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.centara.online/getting-started/configuration/layouts-and-menus/applying-functionalty-to-buttons.md).

# Applying functionalty to buttons

When a button is added to an existing layout, it is necessary first to make space for the button on the layout.  If a menu that can contain 2 x 2 buttons looks like the one below, there is clearly no more room for buttons.  Then some space can be provided by either adding columns to right or rows beneath by changing the **Columns** and **Rows** properties.&#x20;

![](/files/-LuIZcUu7TjJE4zc6ZxJ)

When some space has been created, a button can be added.

![](/files/-LuI_MY15Cn_VjTqyXyo)

{% hint style="info" %}
When a button is added, it's location is programmatically determined.  After a button is in place, to button can be dragged to it's final location.
{% endhint %}

Functionality can be applied to a button when it is selected.

## Applying a pre-configured functionality group

To simplify the configuration of complex buttons, some pre-configured groups have been added that can simply be added to a button so that only minor adjustments have to made.&#x20;

![](/files/-LuIbdeU33Q4f5TLu_N7)

With a button selected, one of the following pre-configured functionality groups can be applied:

* Cash (cash tender)

  * This group configures a button for Cash payment, except that the cash tender ID must be provided (usually "1") and an optional preset amount if the button is to automatically apply a certain amount.

  &#x20;<img src="/files/-LuIcWIAOVGwMsbRzudI" alt="" data-size="original">&#x20;
* Change price
* Change quantity
* Item

  * This group configures a button to sell a specific item.  An item ID that exists in the item database must be provided.  There is no need to provide description to that button since the description form the item database is used.  (After the ID has been entered a refresh of the site may be needed to view the description).  If another description in expected, then the **Caption** property can be applied to overwrite the description from the database.   If an image exists in the image database for the provided item ID, that that image is loaded automatically on top of this button.

  <img src="/files/-LuIeqPpHGcxjs81-kcR" alt="" data-size="original">&#x20;
* Menu back
* Menu home
* Menu open
* Tender (other than Cash)

  * This group configures a button for any payment other than Cash payment.  Only a tender ID must be supplied that exists in the tender database.

  <img src="/files/-LuIgNenNuRXafBTOeUR" alt="" data-size="original">&#x20;
* Void item
* Void transaction

{% hint style="info" %}
The properties that control buttons are **Caption, Image, Image record, Macro** and **Style**.  Functionality groups are only some combination of those properties with preset values.  Functionality groups can always be exchanged for the individual set of properties with custom values.
{% endhint %}

## Adding custom functionality to groups

These are the properties that can be applied to a button:

* **Caption**
  * The text that is applied on the button.
* **Image**
  * Image that is on the button.  Note that an image hides any text that has been previously set.
* **Image record**
  * An image taken from the database.
* **Macro**
  * The macro is the function that performs the operation.  Function can optionally take parameters.  Macros can be executed in series by delimiting them with as semi-column.
* **Style**
  * Applies the color to the button.  Either one of the six preset colors or by optionally providing a color in hex triplet format.
