Media

Image

This is an image component. It displays any image, whether you provide the source for it or if the user uploads one.

Parameters

• Label - Text input indicating the label of the component visible in the UI.
• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.
• Source URL - A source URL of the image.
• Alt text - Alternative text.
• Exclude from export - Checkbox. Disabled by default. When enabled, the value of the component will be excluded from the exported annotation JSON.

Related Functions

• getValue(path: List[Union[str, int]]) - Returns the url of the image component.
• setValue(path: List[Union[str, int]], value: str) - Sets the url of the image component.

Web

With this component, you can either provide a URL or your own code to display a webpage in the form.

Parameters

• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.
• Source - There are two options to build your web component with: Source URL, and Code.
• URL - This is visible when URL is selected under Source. In this field, you can provide the url of the webpage you want to show in your form.
• Code - This'll change the component into a code editor that you can write your web code in. You'll also be able to switch to a Preview tab so that you can see what it'll look like before creating the form.
• Height - Numeric input that defines the height of the web component.
• Exclude from export - Checkbox. Enabled by default. When enabled, the value of the component will be excluded from the exported annotation JSON.

Related Functions

• getValue(path: List[Union[str, int]]) - Returns the code's source url or the code itself based on the web component configuration.
• setValue(path: List[Union[str, int]], value: str) - Sets the code's source url or the code itself based on the web component configuration.
• postMessageToWebComponent(path: List[Union[str, int]], message: Union[str, dict]) - Sends the message string to the web component.

Related Events

• on_<component id>_message(path: List[Union[str, int]], value: Union[str, dict]): - Fired when there is a message from the web component, receives the component's path and the value of the incoming message.

Sending messages from web component

• window.parent.postMessage({ action: 'topy', data }, "*"); - Use this JavaScript function to send a message to the main editor. Use topy as an action identifier.

PDF

This component allows you to import a PDF file and view it in the form.

Parameters

• Label - Text input indicating the label of the component visible in the UI.
• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.
• Source URL - A source URL of the image.
• Height - Numeric input that defines the height of the web component.
• Exclude from export - Checkbox. Disabled by default. When enabled, the value of the component will be excluded from the exported annotation JSON.

Related Functions

• getValue(path: List[Union[str, int]]) - Returns the url of the PDF component.
• setValue(path: List[Union[str, int]], value: str) - Sets the url of the PDF component.

Video

This is a video component. It displays any video, whether you provide the source for it or if the user uploads one.

Parameters

• Label - Text input indicating the label of the component visible in the UI.
• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.
• Source URL - A source URL of the video.
• Exclude from export - Checkbox. Disabled by default. When enabled, the value of the component will be excluded from the exported annotation JSON.

Related Functions

• getValue(path: List[Union[str, int]]) - Returns the url of the video component.
• setValue(path: List[Union[str, int]], value: str) - Sets the url of the video component.

Audio

This is an audio component. It displays any audio clip, whether you provide the source for it or if the user uploads one.

Parameters

• Label - Text input indicating the label of the component visible in the UI.
• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.
• Source URL - A source URL of the audio.
• Exclude from export - Checkbox. Disabled by default. When enabled, the value of the component will be excluded from the exported annotation JSON.

Related Functions

• getValue(path: List[Union[str, int]]) - Returns the url of the audio component.
• setValue(path: List[Union[str, int]], value: str) - Sets the url of the audio component.

Avatar

This component is an avatar icon display. It displays an avatar image, whether you provide the source for it or if the user uploads one.

Parameters

• Label - Text input indicating the label of the component visible in the UI.
• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.
• Source URL - A source URL of the avatar image.
• Alt text - Alternative text.
• Exclude from export - Checkbox. Disabled by default. When enabled, the value of the component will be excluded from the exported annotation JSON.

Related Functions

• getValue(path: List[Union[str, int]]) - Returns the url of the avatar component.
• setValue(path: List[Union[str, int]], value: str) - Sets the url of the avatar component.

CSV

This component allows you to display editable CSV grids in your forms.

Parameters:

• Label - Text input indicating the label of the component visible on the UI.
• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.
• Value - Text input field where the CSV data can be filled. The delimiter can be used to divide the data into columns.
• Delimiter - This is where you can select what symbol to use to divide your data into columns.
• Exclude from export - Checkbox. Disabled by default. When enabled, the value of the component will be excluded from the exported annotation JSON.

Related Functions

• getValue(path: List[Union[str, int]]) - Returns the data of the component.

• setValue(path: List[Union[str, int]], value: str) - Sets the data of the component.

• disable(path: List[Union[str, int]]) - Disables the component.

• enable(path: List[Union[str, int]]) - Enables the component.

Related Events

• on_<component id>change(path: List[Union[str, int]], value: str): - Fired when there is a change in the component's CSV data, receives the component's path and the CSV content.