Creating User Interfaces
Library WebUI Home

Overview

Startup & Operation Capturing & Displaying data Styling with CSS Sale lifecycle

Examples

Hello World / minimal Online Selling Page

Overrideables

User Message User Prompt Device

In Depth

EventSource realtime feed The Fieldpine Object UI Dispatch Data Fields Global Namespace Scripts

WebView2

Barcode Handling

CSS Styling and Naming

HTML elements within the selling screens are styled used normal CSS rules. As part of loading the selling page you can define an external CSS page that is loaded. This means you can update or replace Fieldpine default styling with your own.

In general, Fieldpine reserves all CSS names starting with (in any case) 'fieldpine' or 'fdl' or simply 'f_'. So on your self created selling interface you can freely use any CSS names you wish.

Where you are using Fieldpine default UI Dispatch Handlers then these handlers will often dynamically create HTML and update the page. The elements on this dynamically created HTML receive CSS style names as described on this page. The naming of these styles loosely follows the BEM convention

Your
Selling Screen
»User selects
"Discount"
popup
» Using Fieldpine Default Handler
  • HTML dynamically generated
  • HTML elements receive standard CSS names
  • Fieldpine default CSS applied
  • Your CSS replacements applied
 
» Using your discount override handler
  • Your HTML used
  • CSS is whatever you choose to use