Using a Custom Field
Beta
This is a beta version and subject to change without notice. Pricing, terms, conditions and availability may change in the final version.
- Open a Terminal or Command window and install the Iris App Runtime.
npm install @trackunit/iris-app-runtime-core
- Use the
CustomFieldRuntime
command to retrieve custom fields definitions and values saved to the specifiedAsset ID
. If there are no saved values of the Asset ID, only the definition will be retrieved.
import { CustomFieldRuntime, CustomFieldType } from '@trackunit/iris-app-runtime-core';
// Get all custom field values and definitions for your asset ID.
const myCustomFieldsPromise = CustomFieldRuntime.getCustomFieldsFor({
type: 'ASSET',
id: '<my-asset-id>',
});
- Save the custom field value by entering a definition
key
,entity ID
, and a newvalue
.
// Save a custom field value
customFieldRuntime.setCustomFieldsFor(
{
type: 'ASSET',
id: '<my-asset-id>',
},
[
{
definitionKey: 'myKey',
value: {
type: CustomFieldType.STRING,
stringValue: 'My new value',
}
}
]
);
React UI (User Interface) Components
Trackunit provides a React UI Component that renders a custom field input box according to a custom field definition.
npm install @trackunit/custom-field-components
See this complete example for how to use the component:
import React from 'react';
import {
Button,
Card,
CardBody,
CardFooter,
CardHeader,
} from '@trackunit/react-components';
import { CustomField } from '@trackunit/custom-field-components';
import { useForm } from 'react-hook-form';
import { useAssetRuntime, useCustomFieldRuntimeForEntity } from '@trackunit/react-core-hooks';
export const App: React.FC = () => {
const { assetInfo } = useAssetRuntime();
const { customFields, setCustomFieldsFromFormDataForEntity } = useCustomFieldRuntimeForEntity( {
id: assetInfo?.assetId || '',
type: 'ASSET'
});
const { register, handleSubmit, formState, setValue } = useForm({
shouldUnregister: false,
});
// With the component it is possible to render an input component for any custom field by
// providing a field retrieved from useCustomFieldRuntimeForEntity to the component.
return (
<Card>
<CardHeader
heading="Custom Fields"
subHeading="Showcase for custom fields."
/>
<CardBody>
{customFields?.map((field) => {
return (
<CustomField
field={field}
key={field.definition.key}
register={register}
formState={formState}
setValue={setValue}
/>
);
})}
</CardBody>
<CardFooter>
<Button onClick={handleSubmit(setCustomFieldsFromFormDataForEntity)}>
Save Changes
</Button>
</CardFooter>
</Card>
);
};
Updated 7 months ago