UIControls

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

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:

• ProductIds to specify the products that the UIControls should be fetched for. (Accessory data are only given for products)
• 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": [451648],
  "ProductGroupIds": [],
  "ProductFamilyIds": [],
  "InterfaceI18n": {
    "Language": "de",
    "Region": "DE",
    "UnitSystem": "metric"
  },
  "CalculationI18n": {
    "Language": "de",
    "Region": "DE",
    "UnitSystem": "metric"
  }
}

Passing the UIControls to the AccessoryForm

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() {
  
  const [callback, setCallback] = useState<CallBack>({} as CallBack);
  const [accessoriesCallback, setAccessoriesCallback] = useState<RequestAccessory[]>();

  const reqBody = {
    ProductIds: [451648],
    ProductGroupIds: [],
    ProductFamilyIds: [],
    InterfaceI18n: {
      Language: "de",
      Region: "DE",
      UnitSystem: "metric"
    },
    CalculationI18n: {
      Language: "de",
      Region: "DE",
      UnitSystem: "metric"
    }
  }

  useEffect(() => {
    console.log("Callback", callback);
  }, [callback]);

  useEffect(() => {
    console.log("Accessories Callback", accessoriesCallback);
  }, [accessoriesCallback]);

  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}  />
      <AccessoryForm UIControls={data} callback={setAccessoriesCallback} />
    </>
  );
}

export default App