Creating and Configuring Buttons

There is a separate file for each section of the POS Client user interface. The corresponding buttons are described in these files, which are located in subfolders under: ..\ui\layouts\tpos\simple\ .

Examples:

The file registrationTabs.xml contains all buttons of the single tabs shown in the entry mask. Therefore, the file is located in the subfolder registration.
The file paymentTabs.xml contains all buttons of the single tabs shown in the payment mask. Therefore, the file is located in the subfolder payment.

Creating a Button

To create a button, insert the button at the desired position of the POS Client user interface.

The buttons are arranged one after another. It is possible to define the line but not the column.

See the following example taken from the file registrationTabs.xml:

<div id="tab_item" layout="wrapLayout"> 
<div class="buttonsPanel additional" layout="wrapLayout"> 
<input id="returnsWithTransactionButton" type="button" class="small" valueKey="returns.with.transaction" 
configId="GoodsReturnConfigs.WithSC" /> 
<input id="itemInfosButton" type="button" valueKey="iteminfo.iteminfoRegistration.button" /> 
<input id="fixItemRegistrationButton" type="button" valueKey="itemRegistration.itemButtonRegistration.button" 
configId="ItemEntryConfigs.FixItem" /> 
<input id="merchandiseCategorySale" type="button" valueKey="merchandiseCategorySale.merchandiseCategorySaleRegistration.button" /> 
</div> 
<div class="buttonsPanel additional" layout="wrapLayout"> 
<input id="giftCertificateSaleButton50" type="button" valueKey="giftCertificate.saleGiftCard50.button" 
configId="GiftCertificateSaleConfigs.GiftCertSale50" /> 
<input id="giftCertificateSaleButton" type="button" valueKey="giftCertificateSale.saleGiftCard.button" 
configId="GiftCertificateSaleConfigs.GiftCardSale" /> 
<input id="giftCertificateSaleButtonCert" type="button" valueKey="giftCertificateSale.saleGiftCert.button" 
configId="GiftCertificateSaleConfigs.POSGiftCertSaleWithoutGCS" /> 
</div> 
<div class="buttonsPanel additional" layout="wrapLayout"> 
<input id="giftCertificateInfoButton" type="button" valueKey="giftCertificateinfo.giftCertInfo.button" /> 
<input id="giftCertificateReturnButton" type="button" valueKey="giftCertificateReturn.giftCertReturn.button" /> 
</div> 
</div>

This tab includes three lines. A new line starts with <div class="buttonsPanel additional" layout="wrapLayout">>

The buttons for each line are arranged next to each other. A maximum number of four buttons is possible on each line.

A button consists of the following entry (registrationTabs.xml):

<input id="giftCertificateSaleButton" type="button" 
valueKey="giftCertificateSale.saleGiftCard.button" 
configId="GiftCertificateSaleConfigs.GiftCardSale" />

The following table contains the descriptions of the parameters:


Attribute	Description
id	ID to call the desired function at function call. The ID must be assigned to a transition. This assignment is made in the corresponding promoj file. The promoj files are located under ..\standard\processes\processModels\tpos\simple\ in the corresponding subfolders. In the current example, the file ItemRegistration.promoj contains the following transition assignment: `transition giftCertificateSale = giftCertificateSaleButton`
type="button"	A button is defined.
valueKey	Key defined in the file ui-translation_ {language_country} .properties : `giftCertificateSale.saleGiftCard.button=Gift Card Verkauf` Depending on the language setting, this description is displayed as button text.
configId	Defines parameter settings which overwrite the default settings for the function. The configId is defined in the configuration file for the corresponding function. In our example, this is the file giftCertificateSaleConfigs.properties , located under ..\parameter\client\flow\: `GiftCertificateSaleConfigs.GiftCardSale=include:GiftCertificateSaleConfigs.Default GiftCertificateSaleConfigs.GiftCardSale.validationTime=1095 GiftCertificateSaleConfigs.GiftCardSale.gcsUsage=true ...` Note: When creating the configId, make sure that the default settings are always included: `GiftCertificateSaleConfigs.GiftCardSale=include:GiftCertificateSaleConfigs.Default` Then, the parameters that overwrite the default setting are listed: The default settings are characterized by "Default": `GiftCertificateSaleConfigs.Default.validationTime=-1` In this example, the user-specific value validationTime=1095 overwrites the default value validationTime=-1.

Creating Buttons on a Second Level

Buttons can be created on a second level. This means that further buttons can be accessed by pressing the first button. The starting point is the button on the first level:

The following example taken from the file registrationTabs.xml shows a button with further buttons behind it:

<div class="buttonsPanel additional" layout="wrapLayout">
... 
<input id="tabCustomerLocal" refId="tab_customer_local" type="button" 
valueKey="customerRegistration.customerLocalRegistration.button_tab" /> 
</div>

The refId is used to assign the desired second level buttons behind the first level button.

The refId is defined for the first level button. It is identical to the id from the section div of the following entry. This entry is used to define the buttons on the second level:

<div id="tab_customer_local" layout="wrapLayout"> 
<div class="buttonsPanel additional" layout="wrapLayout"> 
<input id="customerRegistrationButtonLocal" type="button" valueKey="customerRegistration.customerLocalRegistration.button" 
configId="CustomerRegistrationConfigs.CustomerRegistrationLocal" /> 
<input id="customerSearchButtonLocal" type="button" valueKey="customerSearch.customerSearchLocalRegistration.button" 
configId="CustomerSearchConfigs.Default" /> 
</div> 
</div>

Configuring the Tab Menu

Creating the Calling Button

First, define the button to call the tab menu. To do so, for example, you can use the file registrationTabs.xml:

<input id="overlayTabs1" type="button" valueKey="registration.tabButtonMenuMisc.button" 
onclick="api.showOverlay('registrationTabsOverlay1');" />

Configuring the Menu Tabs

The further tab menu configuration is defined in the configuration file registrationTabsOverlay1.xml:

<div class="tabStripsPanel vertical" constraints="Before" layout="wrapLayout"> 
<input id="tabButtonPanel1" refId="tabPanel1" type="button" valueKey="registration.tabButtonPanelMoney.button" /> 
<input id="tabButtonPanel2" refId="tabPanel2" type="button" valueKey="registration.tabButtonPanelTerminalService.button" /> 
<input id="tabButtonPanel3" refId="tabPanel3" type="button" valueKey="registration.tabButtonPanelTest.button" /> 
</div>

Configuring the Buttons of the Menu Tab

The refId from the tab configuration corresponds to the id of the following entry (registrationTabsOverlay1.xml):

<div id="tabPanel1" class="tabPanel" layout="wrapLayout"> 
<div class="buttonsPanel additional" layout="wrapLayout"> ... 
</div> 
</div>

Then, define the desired buttons.

<div id="tabPanel1" class="tabPanel" layout="wrapLayout"> 
<div class="buttonsPanel additional" layout="wrapLayout"> <input id="tenderChangeButton" 
type="button" valueKey="registration.Change.button" /> 
<input id="tenderPickupButton" type="button" valueKey="registration.Pickup.button" /> 
<input id="cashCheckButton" type="button" valueKey="registration.CashCheck.button" /> 
</div> 
</div>

Use the id to define the functionality of the button. This id requires a corresponding transition in a promoj file. The promoj file is located in the folder structure under ../parameter/client/processModels .

An entry defining a transition in the configuration file ItemRegistration.promoj may look as follows for the Change function, for example:

transition tenderChange=tenderChangeButton
visible if (is-empty process.applicationContext.transactionContext.transaction)

It is also possible to configure the function according to the user's requirements. To do so, create a configId.

Define the desired properties in the corresponding properties file, which is located in the folder structure under ../parameter/client/flow .

The user-specific entries overwrite the default configuration.