Create a CMS fields widget

2 min

This example shows how to create a basic widget in Spire.

This widget will display text and an alert-style icon.

This widget will NOT be connected to redux.

This widget will specify two field definitions for the CMS.

The text and icon will both be customizable in the CMS.

📘 Prerequisite You have created a custom blueprint.

(Recommended) You have completed the Create a Custom Widget in Spire: Basic Widget activity.

This example will use the VS Code IDE for building the widget.

Open your IDE.

In your IDE, open the `~/src/FrontEnd` directory from the InsiteCommerce repository.

Find the Widgets directory in your custom blueprint directory (such as _~/FrontEnd/modules/blueprints/myCustomBlueprint/src/Widgets_).

In the Widgets directory, create a new file named CMSFieldsWidget.tsx.

Add the following code to the CMSFieldsWidget.tsx file.

import{ css }from"styled-components";
importAlertCirclefrom"@insite/mobius/Icons/AlertCircle";
importAlertOctagonfrom"@insite/mobius/Icons/AlertOctagon";
importAlertTrianglefrom"@insite/mobius/Icons/AlertTriangle";
importIconfrom"@insite/mobius/Icon";
importReactfrom"react";
importTypographyfrom"@insite/mobius/Typography";
importWidgetModulefrom"@insite/client-framework/Types/WidgetModule";
importWidgetPropsfrom"@insite/client-framework/Types/WidgetProps";

// The `WidgetProps` interface provides a lot of information,
// including the CMS field values. The props object for a widget
// should always extend this interface.

interfaceOwnPropsextendsWidgetProps{
  // The values of the CMS fields are passed to the widget
  // in a `Dictionary` named "fields". You can statically type
  // the names of the fields to make access easier. This also
  // allows the TypeScript compiler to give you type-checking.
    fields:{
   noteText:string;
   noteIcon:string;
    },
}


typeProps=OwnProps;constCMSFieldsWidget=(props:Props)=>{let icon =AlertCircle;
  if(props.fields.noteIcon==="AlertOctagon"){
    icon =AlertOctagon;}elseif(props.fields.noteIcon==="AlertTriangle"){
    icon =AlertTriangle;}return(
 <div style={{display:"flex", alignItems:"flex-start",}}>
   <Icon src={icon} css={css` margin-right:0.5em; `}/>
     {/* Translatable field values will be translated based on the currently selected language for the site.*/}
   <Typography>{props.fields.noteText}</Typography>
 </div>
    );
  };

const widgetModule:WidgetModule={
  component:CMSFieldsWidget,
  definition:{
    fieldDefinitions:[{
      name:"noteText",
      fieldType:"Translatable",// Spire provides quite a few editorTemplates out-of-the-box.
      editorTemplate:"TextField",
      defaultValue:"",
      isRequired:true,
    },
    {
      name:"noteIcon",
      fieldType:"General",
      editorTemplate:"drop-downField",
      defaultValue:"AlertCircle",
      options:[
        {value:"AlertCircle",},
        {value:"AlertOctagon",},
        {value:"AlertTriangle",}
      ],
      isRequired:true,
    }],
    group:"Common",
  },
};

exportdefault widgetModule;

Save the file.

Run Spire using your custom blueprint. Below is an example of starting Spire from the terminal. You may also do this from your IDE. Spire includes some default VS Code launch configurations. npm run start myCustomBlueprint 3000

Go to the CMS. The CMS URL is http://localhost:3000/contentadmin. Use the port number used to run Spire.

Add the BasicWidget to the Home page. You can find it in the Common Elements group in the Add Widget modal.

Click the pencil icon above the widget to modify it. The CMS fields will appear in the left pane.

Save any changes you make.

Publish the changes.

Go to the Storefront. The Storefront URL is http://localhost:3000. Use the port number used to run Spire.

custom_widget_cms_fields_widget_result.png