UIControls

This section will guide you through the process of fetching the UI Controls from the backend and using them in the CalcGatewayForm component.

What are the UIControls?

The UIControls are the data needed for the form fields that are used to configure the calculation request. These values have to be fetched from the Kampmann backend and are used to render the form in the CalcGatewayForm component. They contain information about the type of the field, the label, the default value, the options, the validation rules...

Fetching the UIControls

To fetch the UIControls from the backend, you can use the useGetUIControls hook provided by the kampmann-calcgateway-frontend package. This hook is a simple wrapper around the fetch API and returns the loading state, the error state, and the data state. You may use your own fetch implementation if you prefer.

The useGetUIControls hook takes two arguments:

• The URL of the backend endpoint that returns the UIControls
• The request body that will be sent to the backend

info

Since system requirements differ, you will need a specific URL to request the UIControls. Please contact us for further information.

The request body should contain the following fields:

• one of the following fields: ProductIds, ProductGroupIds, or ProductFamilyIds to specify the products that the UIControls should be fetched for
• InterfaceI18n: an object containing the language, region, and unit system for the interface. This controls the language and units used in the form fields.
• CalculationI18n: an object containing the language, region, and unit system for the calculation. This controls the language and units used in the calculation results.

warning

The ProductIds are not equal to the Article Numbers. The ProductIds refer to the unique IDs which are issued by the PIM system.

Example request body:

{
  "ProductIds": [],
  "ProductGroupIds": [51050],
  "ProductFamilyIds": [],
  "InterfaceI18n": {
    "Language": "de",
    "Region": "DE",
    "UnitSystem": "metric"
  },
  "CalculationI18n": {
    "Language": "de",
    "Region": "DE",
    "UnitSystem": "metric"
  }
}

Passing the UIControls to the CalcGatewayForm

Once you have fetched the UIControls, you can pass them as a prop to the CalcGatewayForm component.

import {CalcGatewayForm, useGetUIControls} from 'kampmann-calcgateway-frontend'
import { useEffect, useState } from 'react'

//Import the styles - these are prefixed classes to avoid conflicts with your own styles
import 'kampmann-calcgateway-frontend/dist/style.css'

function App() {

  //This state is passed as a callback to the CalcGatewayForm component and will store the Request Form result
  const [result, setResult] = useState({})

  //This is the request body that will be used to fetch the UI Controls from the backend
  const reqBody = {
    ProductIds: [],
    ProductGroupIds: [51050],
    ProductFamilyIds: [],
    InterfaceI18n: {
      Language: "de",
      Region: "DE",
      UnitSystem: "metric"
    },
    CalculationI18n: {
      Language: "de",
      Region: "DE",
      UnitSystem: "metric"
    }
  }

  //Log the result when it changes
  useEffect(() => {
    console.log(result)
  }, [result])

  const url = "your/custom/url" // please contact us for your custom url

  /* Fetch the UI Controls from the backend using the useGetUIControls hook
  This hook is just a simple wrapper around the fetch API
  You may use your own fetch implementation if you prefer */
  const {loading, error, data} = useGetUIControls(url, reqBody)

  if (loading) return <p>Loading...</p>;
  if (error) {
    console.error(error)
    return <p>Error :(</p>;
  }

  return (
      <CalcGatewayForm UIControls={data} callback={setResult}  />
  );
}

export default App