Fronted Creating Widgets
22 Questions
6 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

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?

<p>VS Code IDE (D)</p> Signup and view all the answers

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

<p>It allows for modifications to cover additional use cases while retaining original functionality (D)</p> Signup and view all the answers

What object must every widget in Spire default export?

<p>WidgetModule (C)</p> Signup and view all the answers

What must you do to start Spire from VS Code?

<p>Use a launch configuration to start with Node (B)</p> Signup and view all the answers

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

<p>In the Testing Elements group (D)</p> Signup and view all the answers

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

<p>Field definitions defined in code (C)</p> Signup and view all the answers

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

<p>It can be modified using the field definitions (B)</p> Signup and view all the answers

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

<p>TextFieldDefinition and ColorPickerFieldDefinition (D)</p> Signup and view all the answers

What level of control do developers have over custom widgets?

<p>More granular control in code and using field definitions (B)</p> Signup and view all the answers

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

<p>To define constants for widget properties. (D)</p> Signup and view all the answers

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

<p>integerFieldValue (D)</p> Signup and view all the answers

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

<p>It provides a hint to the user about what to enter. (D)</p> Signup and view all the answers

In the ExampleWidget component, how is the checkboxFieldValue displayed?

<p>As a true/false string based on its value. (A)</p> Signup and view all the answers

What type of value does the multilineTextFieldValue accept?

<p>A string with multiple lines. (B)</p> Signup and view all the answers

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

<p>radioButtonsFieldValue (D)</p> Signup and view all the answers

What kind of component is ExampleWidget classified as?

<p>Functional component (D)</p> Signup and view all the answers

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

<p>Props extends WidgetProps (B)</p> Signup and view all the answers

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

<p>textFieldName (D)</p> Signup and view all the answers

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

<p>'' (A)</p> Signup and view all the answers

Flashcards

Custom Widget

A widget created to add unique features or functionalities to a page in Spire.

Field Definitions

Specs for how a widget will appear and be modified in the CMS.

Widget Component

The part of a custom widget that is displayed and interacts with the user.

Widget Module

The descriptor (definition) file for the custom widget, including details and settings.

Signup and view all the flashcards

Spire Widget

A ready-made content block for a page in Spire.

Signup and view all the flashcards

CMS

Content Management System, where users and developers manage site content.

Signup and view all the flashcards

TypeScript

Programming language used to create custom widgets in Spire.

Signup and view all the flashcards

React Component

A reusable part of a user interface, typically written in JavaScript/TypeScript, used in Spire widgets.

Signup and view all the flashcards

CheckboxField

A widget field component for allowing users to select or deselect options from a page.

Signup and view all the flashcards

TextField

A widget field component for allowing the creation of text input.

Signup and view all the flashcards

IntegerField

A numeric input field component.

Signup and view all the flashcards

MultilineTextField

A text input field for multiple lines of text.

Signup and view all the flashcards

RadioButtonsField

A component for setting up a set of choices from which the user can select one.

Signup and view all the flashcards

DropdownField

A selector for selecting an item from a list.

Signup and view all the flashcards

Content Admin interface

The interface in Spire for managing and editing site content.

Signup and view all the flashcards

Publish Changes

Making the modifications to a page visible to the users.

Signup and view all the flashcards

Override existing widgets

Modifying existing widgets to meet specific needs.

Signup and view all the flashcards

Node.js

JavaScript runtime environment enabling web apps' backend development.

Signup and view all the flashcards

Study Notes

Creating a Custom Widget in Spire

  • 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.

Quiz Team

Related Documents

Front-End - Creating Widgets PDF

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!

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser