Creating a layout template component

1. Open the sldxcomponents folder that you created in Creating your first Field component.
2. In Visual Studio, in a new terminal, enter npm run create.
3. Using the arrow keys on your keyboard, navigate to the 2) Layout template line, and then press the Enter key.
4. Using the arrow keys on your keyboard, navigate to the 1) DETAILS, and then press the Enter key.
5. When prompted to enter the required component name, enter NavigateWrapper, and then press the Enter key.
6. When prompted to enter the required component label, enter Navigate to step template, and then press the Enter key.   
   Your terminal screen should have similar values to the following figure: 
   
7. In your Visual Studio Code terminal, enter npm run startStorybook.
   The preview of the sample Details layout template provided by DX Component Builder is displayed, as shown in the following figure:
   
8. In Storybook, change the label in the Controls pane, and then turn the showHighlightedData and showLabel values on and off.
9. When you finish exploring the story, close the web page, and then stop the terminal instance that runs the Storybook in Visual Studio Code.

1. In the Pega Platform instance for the challenge, enter the following credentials:
   1. In the User name field, enter developer@sl.
   2. In the Password field, enter pega123!.
      The developer@sl operator uses Dev Studio as the default Portal. 
2. In the header of Dev Studio, click Launch Portal > Customer Portal.
   
3. In the navigation pane of the Customer Portal, click Create > Incident to create a new Incident Case. 
4. In the Incident Type list, select Product faulty or unsafe. 
5. In the Incident SubType list, select Injury caused by faulty product, and then click Next. 
6. Add any valid data to the subsequent forms displayed to progress from the Create Stage to the Select Resolution Method Step. 
   注： Do not progress to the Review Stage yet.
7. Right-click the browser window that has the Create Incident dialog box displayed, and then select Inspect to open the Developer Tools in Chrome.
8. Click the Console tab.
9. Enter PCore.getDebugger().enableXRay(), and then press the Enter key.
   
10. In the Create Incident dialog box, click Next to progress the case to the final Review Step.
    With the PCore debugger enabled, you can see additional information icons that provide useful information. For now, you only need to obtain data that you can use to update the mock.ts file and make the Storybook story more relevant to the use case.
    
11. Click the i icon next to the View: ReviewInner label.
12. Select everything in the Component metadata section, and then copy it to your clipboard 
13. Open your Visual Studio Code project, and then access the src/components/Sl_DXExtensions_NavigateWrapper directory.
14. Open the mocks.ts file.
15. Navigate to the top of the file and add two new lines.
16. In the first line, enter the following code: export const reviewInner =.
17. Place your pointer after the equal sign, and then paste the text that you copied to the clipboard. 
    The first object in your mocks.ts file should look like the following code:
    export const reviewInner = {
      name: 'ReviewInner',
      type: 'View',
      config: {
        ruleClass: 'SL-TellUsMore-Work-Incident',
        template: 'Details',
        localeReference: '@LR SL-TELLUSMORE-WORK-INCIDENT!VIEW!REVIEWINNER',
        inheritedProps: [
          {
            prop: 'label',
            value: '@L Review Inner'
          },
          {
            prop: 'showLabel',
            value: true
          }
        ]
      },
      children: [
        {
          name: 'A',
          type: 'Region',
          children: [
            {
              type: 'reference',
              config: {
                name: 'DetermineCategory',
                inheritedProps: [
                  {
                    prop: 'label',
                    value: '@L Determine Category'
                  },
                  {
                    prop: 'showLabel',
                    value: true
                  }
                ],
                ruleClass: 'SL-TellUsMore-Work-Incident',
                type: 'view'
              }
            },
            {
              type: 'reference',
              config: {
                name: 'ContactInfo',
                inheritedProps: [
                  {
                    prop: 'label',
                    value: '@L Contact Info'
                  },
                  {
                    prop: 'showLabel',
                    value: true
                  }
                ],
                ruleClass: 'SL-TellUsMore-Work-Incident',
                type: 'view'
              }
            },
            {
              type: 'reference',
              config: {
                name: 'ServiceDetails',
                inheritedProps: [
                  {
                    prop: 'label',
                    value: '@L Service Details'
                  },
                  {
                    prop: 'showLabel',
                    value: true
                  }
                ],
                ruleClass: 'SL-TellUsMore-Work-Incident',
                type: 'view',
                visibility: '@W ServiceIncident_FLOW_1'
              }
            },
            {
              type: 'reference',
              config: {
                name: 'ProductDetials',
                inheritedProps: [
                  {
                    prop: 'label',
                    value: '@L Product Details'
                  },
                  {
                    prop: 'showLabel',
                    value: true
                  }
                ],
                ruleClass: 'SL-TellUsMore-Work-Incident',
                type: 'view',
                visibility: '@W ProductIncident_FLOW_1'
              }
            },
            {
              type: 'reference',
              config: {
                name: 'ResolutionMethod',
                inheritedProps: [
                  {
                    prop: 'label',
                    value: '@L Resolution method'
                  },
                  {
                    prop: 'showLabel',
                    value: true
                  }
                ],
                ruleClass: 'SL-TellUsMore-Work-Incident',
                type: 'view'
              }
            }
          ]
        }
      ],
      classID: 'SL-TellUsMore-Work-Incident',
      isDeclarativeTarget: false
    };
18. Save the file.
19. Close the browser window that has the debug console enabled.

1. In Visual Studio Code, open the VS Code in your src/components/Sl_DXExtensions_NavigateWrapper component folder.
2. Open the demo.stories.tsx file, and add the reviewInner object to the list of imported objects from './mock' module:
   import {
     reviewInner,
     pyReviewRaw,
     pyReviewResolved,
     regionChildrenResolved,
     operatorDetails,
     configProps
   } from './mock';
3. Navigate to the following Region component definition: const Region = (props: any) => {.
4. Replace the return function in the Region component with the following code: return <>This is a Region with {props.getPConnect().getChildren().length} children</> ;.
5. Navigate to the return function near the end of the demo.stories.tsx file, and then replace it with the following code:
     return (
       <SlDxExtensionsNavigateWrapper {...props} {...args}>
         <Region
           {...{
             getPConnect: () => ({
               setInheritedProp: () => {},
               getChildren: () =>
                 reviewInner.children[0].children.map((child, index) => {
                   return {
                     getPConnect: () => ({
                       getRawMetadata: () => reviewInner.children[0].children[index],
                       getConfigProps: () => {},
                       resolveConfigProps: () => {
                         return {
                           hideLabel: true
                         };
                       },
                       getComponent: () =>
                         props.getPConnect().createComponent(reviewInner.children[0].children[index])
                     })
                   };
                 })
             })
           }}
         />
       </SlDxExtensionsNavigateWrapper>
     );
6.  Save the file.
   補足： The getPConnect().getComponent() function is mode data that reuses the mocked props.getPConnect().createComponent() function.  Currently, this function only renders React components for the mock fields, so you must add in support for rendering the mock Views. 
7. Navigate to the createComponent function, and then replace it with the following code:     
           createComponent: (config: any) => {
             // eslint-disable-next-line default-case
             switch (config.config.value) {
               case '@P .pyStatusWork':
                 return renderField(pyReviewResolved.highlightedData[0].config);
               case '@P .pyID':
                 return renderField(pyReviewResolved.highlightedData[1].config);
               case '@P .pxCreateDateTime':
                 return renderField(pyReviewResolved.highlightedData[2].config);
               case '@USER .pxCreateOperator':
                 return renderField(pyReviewResolved.highlightedData[3].config);
               case '@P .pySLADeadline':
                 return renderField(regionChildrenResolved[0]);
               case '@P .pySLAGoal':
                 return renderField(regionChildrenResolved[1]);
               case '@P .pySLAStartTime':
                 return renderField(regionChildrenResolved[2]);
               default:
                 return <>{config.config.name}</>;
             }
           },
8. Save the demo-stories.tsx file.
9. In Visual Studio Code, open a terminal, enter npm run startStorybook, and press they Enter key.
   You now see the highlightedData section and all of the View names from reviewInner concatenated under the highlightedData section, as shown in the following figure:
   
   補足： Now that you have the mock data for our Storybook story, you can begin to enhance the component code. You enhance the code iteratively by checking that the story still works. If not, then you fix the story and component code until it does. As a result, you can be more confident that your final component works in Pega Infinity as designed. 

1. Open your Visual Studio Code project, and then open the src/components/Sl_DXExtensions_NavigateWrapper directory.
2. Create a new file in this directory called NavigateRender.tsx
3. Paste the following starter code:
   import type { ReactElement } from 'react';
   
   interface NavigateRenderProps {
     children?: never;
     child: NonNullable<ReactElement>;
   }
   
   const NavigateRender = (props: NavigateRenderProps) => {
     const { child } = props;
   
     return <>{child}</>;
   };
   
   export default NavigateRender;
4. Save NavigateRender.tsx
5. Open index.tsx
6. Locate the line:

7. Enter the following import code for the NavigateRender

8. In the return function, replace

with

9. Save index.tsx
10. In a terminal enter 

11. Your Storybook story will look like the following figure: 
    
    You will now modify the NavigateRender.tsx file to iterate the children of the Region (as defined in the metadata and not to be confused with React children). 
12. Replace the existing code in your NavigateRender component with the following code:

13. Save NavigateRender.tsx

Storybook will automatically rebuild your project and show you the new Story. Your Storybook story screen in the browser should look like the following figure:

You will expand what you display to add a navigation button next to each View. You must change the interface definition of your component and pass in the navigation data from the index.tsx file.   

14. Open index.tsx 
15. Add the following type definition above the function declaration of the component:

16. After the line:

17. Enter the following code:

18. Open NavigateRender.tsx
19. Replace the code above the NavigateRender declaration with the following code: 
    import type { ReactElement } from 'react';
    import { Text } from '@pega/cosmos-react-core';
    import type { Step } from './index';
    
    interface NavigateRenderProps {
      children?: never;
      child: NonNullable<ReactElement>;
      stepMap?: Map<string, Step>;
    }
20. Replace the contents of NavigateRender function to add the lookup in the stepMap to get the ID needed to call the navigateToStep PConnect api with the following code:
      const { child, stepMap } = props;
    
      const regionPConn: typeof PConnect = child.props.getPConnect();
    
      return regionPConn ? (
        <div>
          {regionPConn.getChildren().map((childRef, index: number) => {
            const refPConn: typeof PConnect = childRef.getPConnect();
            const reference: ReactElement = refPConn.getComponent();
    
            const ID = stepMap?.get(refPConn.getConfigProps()?.name)?.ID;
    
            return (
              <div key={`child-${index + 1}`}>
                {reference}
                <Text>, TaskID:{ID}</Text>
              </div>
            );
          })}
        </div>
      ) : (
        <div>Error in Region</div>
      );
21. Save NavigateRender.tsx and index.tsx
22. Navigate to the Storybook tab in your browser and observe that the Story is now broken with the following error:
    PCore.getConstants is not a function

    For a Storybook story to still work, two things need to happen. The first is that you must update your Storybook mock data to include the navigation data array, and we also need to add mocks for the getValue() PConnect api and getConstants() PCore api. 

23. Open the demo.stories.tsx file, and then above the line:

24. Add the following code:

25. Replace the code that defines the story with the following code:  
    export const BaseSlDxExtensionsNavigateWrapper: Story = args => {
      const props = {
        getPConnect: () => {
          return {
            getValue: () => navigationSteps,
            getChildren: () => {
              return pyReviewRaw.children;
            },
            getRawMetadata: () => {
              return pyReviewRaw;
            },
            getContextName: () => {
              return 'app/primary_1';
            },
            getInheritedProps: () => {
              return pyReviewRaw.config.inheritedProps;
            },
            createComponent: config => {
              // eslint-disable-next-line default-case
              switch (config.config.value) {
                case '@P .pyStatusWork':
                  return renderField(pyReviewResolved.highlightedData[0].config);
                case '@P .pyID':
                  return renderField(pyReviewResolved.highlightedData[1].config);
                case '@P .pxCreateDateTime':
                  return renderField(pyReviewResolved.highlightedData[2].config);
                case '@USER .pxCreateOperator':
                  return renderField(pyReviewResolved.highlightedData[3].config);
                default:
                  return <>{config.config.name}</>;
              }
            },
            setInheritedProp: () => {
              /* nothing */
            },
            resolveConfigProps: config => {
              return config;
            }
          };
        }
      };
    
      return (
        <SlDxExtensionsNavigateWrapper {...props} {...args}>
          <Region
            {...{
              getPConnect: () => ({
                setInheritedProp: () => {},
                getChildren: () =>
                  reviewInner.children[0].children.map((child, index) => {
                    return {
                      getPConnect: () => ({
                        getRawMetadata: () => reviewInner.children[0].children[index],
                        getConfigProps: () => reviewInner.children[0].children[index]?.config,
                        getComponent: config =>
                          props.getPConnect().createComponent(reviewInner.children[0].children[index])
                      })
                    };
                  })
              })
            }}
          />
        </SlDxExtensionsNavigateWrapper>
      );
    };
26. Save demo.stories.tsx. Your Storybook story is displayed in the browser, as shown in the following figure:
    

    The TaskIDs are blank because you are not passing the data through from the index.tsx file to the NavigateRender.tsx file.

27. Add the stepMap prop to the NavigateRender component in index.tsx as shown in the following code: 

28. Save index.tsx file.
29. Open Storybook and observe that the TaskIDs now populate your story.

The current code in NavigationRender.tsx demonstrates that you have all the mock data set up correctly, but there is no layout. For layouts, you typically use the Flex and Grid components provided by the Constellation design system. You only need to use the Flex component configured as a container to display Flex items. 

Flex and Grid components are wrappers to CSS Flex and CSS Grid, so familiarity with these core web features helps you lay out your screens. The use of CSS Grid and CSS Flex is beyond the scope of this training. 

1. Paste the following code into the NavigateRender.tsx file to replace the full content of the file:
   import type { ReactElement } from 'react';
   import { Flex, Text } from '@pega/cosmos-react-core';
   import type { Step } from './index';
   
   interface NavigateRenderProps {
     children?: never;
     child: NonNullable<ReactElement>;
     stepMap?: Map<string, Step>;
   }
   
   const NavigateRender = (props: NavigateRenderProps) => {
     const { child, stepMap } = props;
   
     const regionPConn: typeof PConnect = child.props.getPConnect();
   
     return regionPConn ? (
       <div>
         {regionPConn.getChildren().map((childRef, index: number) => {
           const refPConn: typeof PConnect = childRef.getPConnect();
           const reference: ReactElement = refPConn.getComponent();
   
           const ID = stepMap?.get(refPConn.getConfigProps()?.name)?.ID;
   
           return (
             <Flex key={`container-${index + 1}`} container={{ direction: 'row' }}>
               <Flex item={{ grow: 1 }}>
                  {reference}
               </Flex>
               <Flex style={{ 'margin-block': 'auto' }} item={{ grow: 0 }}>
                 {ID && <Text>Task ID: {ID}</Text>}
               </Flex>
             </Flex>
           );
         })}
       </div>
     ) : (
       <div>Error in Region</div>
     );
   };
   
   export default NavigateRender;
2. Save the NavigateRender.tsx file.
   Your story should resemble the following figure:
   

The UX design specifies that a separator needs to be between each of the Views in the Review Step. To do this, you reuse the existing StyledDetailsGridContainer and StyledHighlightedFieldsHrLine styled components with a few style enhancements so that it honors the App Studio theme.

3.  Open the styles.ts file, and then replace the StyledDetailsGridContainer  and StyledHighlightedFieldsHrLine code with the following code:

   export const StyledDetailsGridContainer = styled.div(
     ({ theme }: { theme: typeof themeDefinition }) => {
       return css`
         margin-line-start: 1;
         padding-top: ${theme.base.spacing};
       `;
     }
   );
   
   export const StyledHighlightedFieldsHrLine = styled.hr(
     ({ theme }: { theme: typeof themeDefinition }) => css`
       border-top: unset;
       border-radius: unset;
       border-style: unset;
       border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
       margin-block-end: calc(1.5 * ${theme.base.spacing});
       padding-bottom: ${theme.base.spacing};
     `
   );
4. Add the following code to the beginning of the styles.ts file:
   import { themeDefinition } from '@pega/cosmos-react-core';
5. Save the styles.ts file.
6. Open the NavigateRender.tsx file, and then add the following to the imports block to the beginning of your file:
   import React from 'react';
   import { StyledHighlightedFieldsHrLine } from './styles';
7. Replace your return code block with the following code:
     return regionPConn ? (
       <div>
         {regionPConn.getChildren().map((childRef, index: number) => {
           const refPConn: typeof PConnect = childRef.getPConnect();
           const reference: ReactElement = refPConn.getComponent();
   
           const ID = stepMap?.get(refPConn.getConfigProps()?.name)?.ID;
   
           return (
             <React.Fragment key={`wrapper-${index + 1}`}>
               <Flex container={{ direction: 'row' }}>
                 <Flex item={{ grow: 1 }}>
                   {refPConn.getComponent()}
                 </Flex>
                 <Flex style={{ 'margin-block': 'auto' }} item={{ grow: 0 }}>
                   {ID && <Text>Task ID: {ID}</Text>}
                 </Flex>
               </Flex>
               <StyledHighlightedFieldsHrLine />
             </React.Fragment>
           );
         })}
       </div>
     ) : (
       <div>Error in Region</div>
     );
8. Preview your Story in the browser. 
   You now see clean separators that are based on the App Studio theme, so the system reflects any changes that impact the styles in your component.
   The following screenshot shows the final layout and styles applied: 
   

You are now closer to having a fully functioning template component. However, you still need to add the Button component you created in the Creating your first Field component challenge and an Icon component to display the pencil icon.

1. Open the NavigateRender.tsx file, and then replace the {ID && <Text>Task ID: {ID}</Text>} code with  the following code:

     {ID && (
        <Button variant='link' onClick={() => alert(`Clicked ID: ${ID}`)}>
           <Icon name='pencil' />
             Edit
           </Button>
     )}
2. Replace the import statements with the following code near the beginning of the NavigateRender.tsx file to add the import statements for Button and Icon from '@pega/cosmos-react-core' as well as importing and registering the Pencil icon:
   import React from 'react';
   import type { ReactElement } from 'react';
   import { Button, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
   import type { Step } from './index';
   import { StyledHighlightedFieldsHrLine } from './styles';
   import * as pencil from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
   
   registerIcon(pencil);
3. Save the NavigateRender.tsx file.
   The component is now beginning to resemble the target component with the link variant of the Button component rendered with the Pencil icon. 
4. Click Edit.  
   An alert is displayed with the TaskID of the item clicked. 
   

Now you must add the navigateToStep action instead of our alert. First, update your demo.stories.tsx file with the mocked out navigateToStep function. The navigateToStep function requires two parameters: the stepID and the ContainerItemID.  The ContainerItemID can be retrieved using the getContextName() PConnect api and the stepID is the ID from the navigation.steps array. 

5. Open the demo.stories.tsx file, and then replace the existing return function code with the following code:
     return (
       <SlDxExtensionsNavigateWrapper {...props} {...args}>
         <Region
           {...{
             getPConnect: () => ({
               setInheritedProp: () => {},
               getValue: () => navigationSteps,
               getActionsApi: () => ({
                 navigateToStep: step => alert(`Clicked ${step}`)
               }),
               getChildren: () =>
                 reviewInner.children[0].children.map((child, index) => {
                   return {
                     getPConnect: () => ({
                       getContextName: () => {},
                       getLocalizedValue: val => val,
                       getRawMetadata: () => reviewInner.children[0].children[index],
                       getConfigProps: () => reviewInner.children[0].children[index]?.config,
                       getComponent: config =>
                         props.getPConnect().createComponent(reviewInner.children[0].children[index])
                     })
                   };
                 })
             })
           }}
         />
       </SlDxExtensionsNavigateWrapper>
     );
6. Save the demo.stories.tsx file.
   The previous code now allows you to replace your alert in the NavigateRender.tsx file with the mocked function calls. 
7. Open the NavigateRender.tsx file, and then replace the line containing the alert with the following code: 
   <Button variant='link' onClick={() => navigateToStep(ID, refPConn.getContextName())}>

Before we can use this code, we need to add some more code to define the navigateToStep function.  

8. Under the line beginning with const regionPConn: typeof PConnect = child.props.getPConnect();, add the following code:
     const actionsAPI = regionPConn.getActionsApi();
     const navigateToStep = actionsAPI.navigateToStep.bind(actionsAPI);

   If you published this component as is and applied it to the ReviewInner View as a template, it will work. All the links are clickable, and you can navigate to the correct steps in the Multistep forms. However, there is another code change that you must perform to avoid having extra lines displayed for any View that has a visibility condition set that makes the view not visible at run time. This is a simple fix, and the following code needs to be added in order to do the visibility check. You do this early on in the loop so you can do an early return if the View is not visible. 

9. Open the NavigateRender.tsx file, and then under the const reference: ReactElement = refPConn.getComponent(); line, add the following visibility check code:
   if (reference.props?.visibility === false) {
     return(<></>);
   }    

   Your complete code for the NavigateRender.tsx file should look like the following code:

   import type { ReactElement } from 'react';
   import { Button, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
   import type { Step } from './index';
   import { StyledHighlightedFieldsHrLine } from './styles';
   import * as pencil from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
   
   registerIcon(pencil);
   
   interface NavigateRenderProps {
     children?: never;
     child: NonNullable<ReactElement>;
     stepMap?: Map<string, Step>;
   }
   
   const NavigateRender = (props: NavigateRenderProps) => {
     const { child, stepMap } = props;
   
     const regionPConn: typeof PConnect = child.props.getPConnect();
     const actionsAPI = regionPConn.getActionsApi();
     const navigateToStep = actionsAPI.navigateToStep.bind(actionsAPI);
   
     return regionPConn ? (
       <div>
         {regionPConn.getChildren().map((childRef, index: number) => {
           const refPConn: typeof PConnect = childRef.getPConnect();
   
           const reference: ReactElement = refPConn.getComponent();
   
           if (reference.props?.visibility === false) {
             return;
           }
   
           const ID = stepMap?.get(refPConn.getConfigProps()?.name)?.ID;
   
           return (
             <React.Fragment key={`wrapper-${index + 1}`}>
               <Flex container={{ direction: 'row' }}>
                 <Flex item={{ grow: 1 }}>
                   {reference}
                 </Flex>
                 <Flex style={{ 'margin-block': 'auto' }} item={{ grow: 0 }}>
                   {ID && (
                     <Button
                       variant='link'
                       onClick={() => navigateToStep(ID, refPConn.getContextName())}
                     >
                       <Icon name='pencil' />
                       Edit
                     </Button>
                   )}
                 </Flex>
               </Flex>
               <StyledHighlightedFieldsHrLine />
             </React.Fragment>
           );
         })}
       </div>
     ) : (
       <div>Error in Region</div>
     );
   };
   
   export default NavigateRender;

10. Save the NavigateRender.tsx file, and then look at the Storybook story in your browser. 
    The same display is intact; however, when you click Edit, the system runs the navigateToStep mock function.  

The template component is nearly complete. There are two additional changes to make: localization support and updating the component definition (config.json) to restrict what users can add to the template's region in App Studio.

1. In Visual Studio Code, open the component source folder, and then open the config.json file.
2. Replace the Region A property with the following code: 

3. Save the config.json file. 
   補足：  This component definition file is only used by App Studio, so the component needs to be published to check its functionality. You defer publishing until you make the final change for localization support. The previous configuration displays a CONTENTPICKER control in the property pane in App Studio when configuring this template. The CONTENTPICKER has been updated to only allow the selection of Views and also to remove the ability to create a field group. For this use case, these Views should belong to the Multi-Step Flow that you want to provide the review feature. With CONTENTPICKER, you can select multiple objects to render at run time. The system passes this metadata to your template when the template is rendered, and you can use it to display the components in any way you want. The default display for each CONTENTPICKER is a Region component. You overrode this default display in your code and render the selected Views by using a different layout.

   Your config.json file should resemble the following code:

   {
     "name": "Sl_DXExtensions_NavigateWrapper",
     "label": "Navigate to views",
     "description": "Navigate to views",
     "organization": "Sl",
     "version": "1.0.0",
     "library": "DXExtensions",
     "allowedApplications": [],
     "componentKey": "Sl_DXExtensions_NavigateWrapper",
     "type": "Template",
     "subtype": "DETAILS",
     "icon": "OneColumnDetails.svg",
     "properties": [
       {
         "name": "showHighlightedData",
         "label": "Enable highlighted fields",
         "format": "BOOLEAN"
       },
       {
         "name": "highlightedData",
         "label": "Highlighted fields",
         "format": "CONTENTPICKER",
         "addTypeList": [
           "Fields"
         ],
         "visibility": "$this.showHighlightedData = true",
         "saveToConfig": true
       },
       {
         "name": "A",
         "label": "Views to navigate to",
         "format": "CONTENTPICKER",
         "addTypeList": [
           "Views"
         ]
       }
     ]
   }

1. Open the NavigateRender.tsx file.
   You might have noticed a static string, Edit,  in the return code block. You must localize this string.
2. Update the line that has the word Edit with the following code: {refPConn.getLocalizedValue('Edit')}.

If you publish now, the component will be fully functional. However, it is not localizable and always displays the value Edit. To make the component fully localizable, you must create another file in the source folder. 

3. Add a new file called localizations.json.
   Ensure that you spell it correctly. 
   補足： The localizations.json file consists of a set of key/value pairs with the key passed into the getLocalizedValue() PConnect api function. The Constellation orchestration layer then returns the value associated
4. Copy and paste the following code into your localizations.json file: 
   {
     "fields": {
       "Edit": "Edit"
     }
   }  
5. Save the localizations.json file.

1. If Visual Studio Code is not already opened in your sldxcomponents project folder, start it, and then open the sldxcomponents project folder.
2. In the src/components folder, open the Sl_DXExtensions_NavigateWrapper folder.
   
3. Delete the following files:
   • OneColumnDetails.svg
   • DetailsRender.tsx
4. Open the index.tsx file, and then delete the following import statement near the beginning of the file: import DetailsRender from './DetailsRender';.
5. Save the index.tsx file.
6. Oopen the demo.stories.tsx file, and then replace the code with the following code:
   import type { Meta, StoryObj } from '@storybook/react';
   import { Text, FieldValueList, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
   import SlDxExtensionsNavigateWrapper from './index';
   import { reviewInner, pyReviewRaw, pyReviewResolved, operatorDetails, configProps } from './mock';
   import StatusWorkRenderer from './StatusWork';
   import Operator from './Operator';
   
   import type { LocaleUtils } from '@pega/pcore-pconnect-typedefs/locale/locale-utils';
   
   const meta: Meta<typeof SlDxExtensionsNavigateWrapper> = {
     title: 'SL/Navigate to step wrapper',
     component: SlDxExtensionsNavigateWrapper,
     parameters: {
       type: 'Details'
     }
   };
   
   export default meta;
   type Story = StoryObj<typeof SlDxExtensionsNavigateWrapper>;
   
   if (!window.PCore) {
     window.PCore = {} as typeof PCore;
   }
   
   window.PCore.getLocaleUtils = () => {
     return {
       getLocaleValue: (value: any) => {
         return value;
       }
     } as LocaleUtils;
   };
   
   window.PCore.getUserApi = () => {
     return {
       getOperatorDetails: () => {
         return Promise.resolve(operatorDetails);
       }
     };
   };
   window.PCore.getConstants = (): Readonly<any> => {
     return {
       CASE_INFO: { NAVIGATION: 'navigation' }
     };
   };
   
   const navigationSteps = {
     steps: [
       { ID: 'AssignmentSF1', actionID: 'DetermineCategory' },
       { ID: 'AssignmentSF2', actionID: 'ProductDetials' },
       { ID: 'AssignmentSF3', actionID: 'ServiceDetails' },
       { ID: 'AssignmentSF5', actionID: 'ResolutionMethod' },
       { ID: 'AssignmentSF4', actionID: 'ContactInfo' }
     ]
   };
   const Region = (props: any) => {
     return <>This is a Region with {props.getPConnect().getChildren().length} children</>;
   };
   
   const renderField = (resolvedProps: any) => {
     const {
       displayAsStatus = false,
       displayMode,
       value = '',
       label = '',
       key,
       // eslint-disable-next-line react-hooks/rules-of-hooks
       theme = useTheme()
     } = resolvedProps;
   
     const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
   
     let val =
       value !== '' ? (
         <Text variant='h1' as='span' key={key}>
           {value}
         </Text>
       ) : (
         ''
       );
   
     if (label === 'Create date/time')
       val = (
         <DateTimeDisplay
           value={value}
           variant='datetime'
           format='long'
           clockFormat={undefined}
           key={key}
         />
       );
   
     if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
   
     const [_label] =
       label === 'Create operator'
         ? [configProps.createLabel, configProps.createOperator, configProps.createDateTime]
         : label === 'Update operator'
           ? [configProps.updateLabel, configProps.updateOperator, configProps.updateDateTime]
           : [configProps.resolveLabel, configProps.resolveOperator, configProps.resolveDateTime];
   
     if (label === 'Create Operator')
       val = (
         <Operator
           label={configProps.hideLabel ? '' : _label}
           name={configProps.createOperator.userName}
           id={configProps.createOperator.userId}
           value={undefined}
           validatemessage=''
           hideLabel={false}
           readOnly={false}
           required={false}
           disabled={false}
           externalUser={undefined}
           metaObj={undefined}
           testId=''
           helperText=''
           getPConnect={(): typeof PConnect => {
             throw new Error('Function not implemented.');
           }}
         />
       );
   
     if (variant === 'inline') {
       val = value || (
         <span aria-hidden='true' key={key}>
           &ndash;&ndash;
         </span>
       );
     } else {
       val = (
         <Text variant='h1' as='span' key={key}>
           {val}
         </Text>
       );
     }
     return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
   };
   
   export const BaseSlDxExtensionsNavigateWrapper: Story = (args: any) => {
     const props = {
       getPConnect: () => {
         return {
           getValue: () => navigationSteps,
           getChildren: () => {
             return pyReviewRaw.children;
           },
           getRawMetadata: () => {
             return pyReviewRaw;
           },
           getContextName: () => {
             return 'app/primary_1';
           },
           getInheritedProps: () => {
             return pyReviewRaw.config.inheritedProps;
           },
           createComponent: (config: any) => {
             // eslint-disable-next-line default-case
             switch (config.config.value) {
               case '@P .pyStatusWork':
                 return renderField(pyReviewResolved.highlightedData[0].config);
               case '@P .pyID':
                 return renderField(pyReviewResolved.highlightedData[1].config);
               case '@P .pxCreateDateTime':
                 return renderField(pyReviewResolved.highlightedData[2].config);
               case '@USER .pxCreateOperator':
                 return renderField(pyReviewResolved.highlightedData[3].config);
               default:
                 return <>{config.config.name}</>;
             }
           },
           setInheritedProp: () => {
             /* nothing */
           },
           resolveConfigProps: (config: any) => config
         };
       }
     };
   
     return (
       <SlDxExtensionsNavigateWrapper {...props} {...args}>
         <Region
           {...{
             getPConnect: () => ({
               setInheritedProp: () => {},
               getValue: () => navigationSteps,
               getActionsApi: () => ({
                 navigateToStep: (step: any) => alert(`Clicked ${step}`)
               }),
               getChildren: () =>
                 reviewInner.children[0].children.map((child, index) => {
                   return {
                     getPConnect: () => ({
                       getContextName: () => {},
                       getLocalizedValue: (val: any) => val,
                       getRawMetadata: () => reviewInner.children[0].children[index],
                       getConfigProps: () => reviewInner.children[0].children[index]?.config,
                       getComponent: () =>
                         props.getPConnect().createComponent(reviewInner.children[0].children[index])
                     })
                   };
                 })
             })
           }}
         />
       </SlDxExtensionsNavigateWrapper>
     );
   };
   
   BaseSlDxExtensionsNavigateWrapper.args = {
     showLabel: true,
     label: 'Details template',
     showHighlightedData: true
   };
   補足：  Replacing the demo.stories.tsx file with the previous code does not change the overall functionality of the Storybook story, but it does remove some linting errors and also adds the story to the SL group in the Storybook navigator. 
7. Save the demo.stories.tsx file.
8. Switch to the Visual Studio Code terminal, and then end the startStorybook process.
9. Close the Storybook browser tab.
10. In Visual Studio Code, open a new terminal, and then enter npm run startStorybook.
11. Observe the new structure of the Storybook story.