1. Developing Open Storefront Framework Applications for Oracle Commerce
  2. Create Custom Widgets
  3. Understand widgets
  4. Understand helper components

Understand helper components

Widgets access and use built-in plug-ins that perform various functions. These functions, or helper components, allow you to further customize your widgets by enabling formats, reading forms, and performing other functions.

Widgets can reference helper components exposed by the application, such as those provided in the /react-components directory, or custom components that are defined explicitly within your application’s /plugin directory. Helper components exist under your application and can be referenced in other components or widgets. These helper components include formats for adding icons, images, links, styles, and others. For example, the Form component allows you to display HTML in a form.

Helper components are abstract, reusable lower-level components or utilities. Although not exposed in the Design page of the administration interface, they can be used when coding widgets and containers. Note that these components are not connected to the state model and get their state information from widgets.

Important: Do not modify the generic helper components, as you may affect the functionality and performance of your application.

The following are some of the helper components that are available:
  • Form - The Form component displays HTML forms. It supports callback methods to invoke actions, for submissions and errors. This component has default form field validation and uses the validationMessage class. You can add custom validation into the Form component. When Form validation occurs, it is best to ensure that it is using HTML5 validation. Note that any form validation should be displayed above the form.
  • Img - This component displays images. It takes callback methods and fallback images when working with failed images.
  • Icons - Icons should be created as a separate component in your application. They must be defined with an SVG paths defined in the component.
  • Styled - This component reads CSS and appends it to the HTML header. The Styled component should be wrapped around all components that have a CSS style.
  • Link - This component should be used on all page navigation that call a URL, as opposed to using an anchor tag with href links. Using an anchor tab with an href link causes the entire page to refresh every time one of the links is selected.