Skip to main content

useTypeLayoutConfig

Reference​

useTypeLayoutConfig hook is called layout API to take data from server. if we call this same API again then this hook is taking configuration details from cache data

const { protrakUtils, protrakComponents } =
  React.useContext(customWidgetContext);

const { useTypeLayoutConfig } = protrakUtils;

const config = useTypeLayoutConfig(pageContext.instanceType, "create");

Parameters​

  • useTypeLayoutConfig function has 2 parameters:
    • typeName : Instance type name
    • configType : Pass config type like 'create', 'view', 'edit', 'dashboard', 'report'

Returns​

  • useTypeLayoutConfig function returns a layout configuration

Usage​

function CreateLayoutTest(pageContext) {
  // Each custom widget can also use platform provided customWidgetContext
  const { protrakUtils, protrakComponents } =
    React.useContext(customWidgetContext);
  const [count, setCount] = React.useState(0);

  // to use protrakUtils
  const { useProtrakApi, protrakApiClient, useTypeLayoutConfig } = protrakUtils;
  // to use protrakComponents
  const { Box, H3, Button, H4 } = protrakComponents;
  const config = useTypeLayoutConfig(pageContext.instanceType, "create");
  console.log(config);

  const headerStyle = {
    margin: "40px",
    border: "5px solid #2d82a6",
    textAlign: "center",
    padding: "20px",
  };

  return (
    <Box style={headerStyle}>
      <H3>Your UI code goes here</H3>
      <Button text={"Click me"} onClick={() => setCount(count + 1)} />
      <H4>Count: {count}</H4>
    </Box>
  );
}

Troubleshooting​

  • check if valid arguments are passed to useTypeLayoutConfig function