Fronted Creating Widgets

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the primary function of widgets in Spire?

To provide automated data backups for content

To manage user accounts across the CMS

To host interactive games on pages

To add content to pages without needing development skills (correct)

When is it more appropriate to create a new custom widget instead of overriding an existing one?

When a pre-defined widget meets most needs with minor adjustments

When the interface needs a quick aesthetic change

When introducing completely new functionality that the existing widgets do not cover (correct)

When the performance of existing widgets is subpar

What directory path is suggested for creating a new widget within the Blueprint?

/modules/blueprints/example/src/Widgets/Common (correct)

/modules/blueprints/widgets

/modules/blueprints/common/widgets

/modules/widgets/new

Which development environment is used for creating a custom widget in this example?

VS Code IDE Signup and view all the answers

What is an advantage of overriding an existing widget in Spire?

It allows for modifications to cover additional use cases while retaining original functionality Signup and view all the answers

What object must every widget in Spire default export?

WidgetModule Signup and view all the answers

Which component is used to instantiate the widget module in the provided code snippet?

ExampleWidget Signup and view all the answers

What must you do to start Spire from VS Code?

Use a launch configuration to start with Node Signup and view all the answers

Where do you find the ExampleWidget widget to add it to the Home page?

In the Testing Elements group Signup and view all the answers

What is required to customize a widget after it has been added to a page?

Field definitions defined in code Signup and view all the answers

What happens after a custom widget is created and added to a page?

It can be modified using the field definitions Signup and view all the answers

Which two field definitions are mentioned as pre-defined attributes for widgets?

TextFieldDefinition and ColorPickerFieldDefinition Signup and view all the answers

What level of control do developers have over custom widgets?

More granular control in code and using field definitions Signup and view all the answers

What is the purpose of the enum named 'fields' in the ExampleWidget?

To define constants for widget properties. Signup and view all the answers

Which field in the WidgetDefinition requires a default value of zero?

integerFieldValue Signup and view all the answers

What does the 'placeholder' property do in the field definitions?

It provides a hint to the user about what to enter. Signup and view all the answers

In the ExampleWidget component, how is the checkboxFieldValue displayed?

As a true/false string based on its value. Signup and view all the answers

What type of value does the multilineTextFieldValue accept?

A string with multiple lines. Signup and view all the answers

Which of the following fields is marked as requiring a tooltip?

radioButtonsFieldValue Signup and view all the answers

What kind of component is ExampleWidget classified as?

Functional component Signup and view all the answers

What would be the type of props in the ExampleWidget component?

Props extends WidgetProps Signup and view all the answers

Which of the following options is NOT a valid field in the WidgetDefinition?

textFieldName Signup and view all the answers

Which default value setting should be used for drop-downFieldValue?

'' Signup and view all the answers

Study Notes

Spire widgets provide a way to add content to pages without development, offering different views based on user roles, languages, and devices.
You can either override existing widgets for minor modifications or create new custom widgets for completely new functionality.
Creating a custom widget involves defining field definitions that are displayed as editable elements in the CMS.
Example: Create a widget showcasing various field definitions like checkbox, text, integer, multiline text, radio buttons, and drop-down.
The widget code is written in TypeScript and defines a React component (ExampleWidget) and its associated definition (widgetModule).
The widget definition includes details like group, field definitions, component, and other configuration options.
You can add custom field definitions using components like CheckboxField, TextField, IntegerField, MultilineTextField, RadioButtonsField, and drop-downField.
Steps to Create and Publish a Custom Widget:
- Create a directory for your widget (e.g., /Widgets/Common).
- Create a TypeScript file for the widget (e.g., ExampleWidget.tsx) and define the component and its field definitions.
- Start the Spire server (using Node.js or a launch configuration in VS Code).
- Access the Content Admin interface (http://localhost:3000/contentadmin) and edit the desired page.
- Add a new row to the page and add the custom widget using the "Add Widget" modal.
- Configure the widget using the field definitions displayed in the sidebar.
- Publish the changes to the page.
- Access the page and view the widget you created.
Widget Field Definitions:
- In Spire, widgets use field definitions to control how their properties are modified in the CMS.
- You can use pre-defined field definitions or create your own custom definitions using React components.
Publishing Custom Widgets:
- Once created, custom widgets can be added to pages using the CMS, just like pre-defined widgets.
- CMS users can customize them using the provided field definitions.
- Developers have granular control over the widget by modifying its code.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

This quiz explores the process of creating custom widgets in Spire using TypeScript and React. You'll learn about defining field definitions, implementing various editable elements, and how to customize widget functionalities based on user roles and languages. Get ready to test your knowledge on widget configuration and development best practices!