2

I am using Sitecore 9.2 with JSS and code first approach. I have one component which has datasource, datasource is pointing to folder and folder has some child items. I am getting data using GraphQL, now I want to edit child items.

I just want to know how I can use Edit frame using JSS?

Improve this question

2 Answers 2

Reset to default
9

If you are using React, Adam Lamarre created PR for JSS repository that enables using Edit Frames within JSS.

Take a look on PR message and code here -> https://github.com/Sitecore/jss/pull/290

You need to add two files:

  1. FieldEditFrame.tsx under packages/sitecore-jss-react/src/components/
  2. index.ts under packages/sitecore-jss-react/src/

Content of packages/sitecore-jss-react/src/components/FieldEditFrame.tsx:

import React from 'react';
import { withSitecoreContext } from '../enhancers/withSitecoreContext';

export interface FieldEditFrameProps {
    itemId?: string,
    fields?: string[],
    header?: string,
    icon?: string,
    disabledIcon?: string,
    tooltip?: string,
    command?: string,
    commandDisplayName?: string,
    databaseName?: string,
    language?: string,
    hideIfNotPageEditing?: boolean,
    sitecoreContext: {
        language?: string,
        pageEditing?: boolean,
        route: {
            databaseName?: string
        }
    }
}

export const FieldEditFrameWrapper: React.SFC<FieldEditFrameProps> = ({
    itemId,
    fields,
    header,
    icon,
    disabledIcon,
    tooltip,
    command,
    commandDisplayName,
    databaseName,
    language,
    children
}) => {
    // ensure fields and itemId are configured
    if (!itemId || !fields) {
        return null;
    }

    // item uri for edit frame target
    const contextItemUri = `sitecore://${databaseName}/${itemId}?lang=${language}`;

    // click action for edit frame command
    const clickCommandAction = `webedit:fieldeditor(command=${command},fields=${fields.join(
        "|"
    )},id=${itemId})`;

    // click for command for the edit frame
    const clickCommand = {
        click: `javascript:Sitecore.PageModes.PageEditor.postRequest('${clickCommandAction}',null,false)`,
        header: header,
        icon: icon,
        disabledIcon: disabledIcon,
        isDivider: false,
        tooltip: tooltip || `Edit the following fields: ${fields.join(", ")}`,
        type: null
    };

    // command data that is serialized for the edit frame
    const commandData = {
        commands: [clickCommand],
        contextItemUri: contextItemUri,
        custom: {},
        displayName: commandDisplayName || 'Edit Properties',
        expandedDisplayName: ""
    };

    // edit frame attributes
    const divAttrs = {
        'sc_item': contextItemUri,
        'sc-part-of': 'editframe'
    }

    return <div
        className="scLooseFrameZone scEnabledChrome"
        {...divAttrs}>
        <span className="scChromeData">{JSON.stringify(commandData)}</span>
        {children}
    </div>
};

export const FieldEditFrameComponent: React.SFC<FieldEditFrameProps> = ({
    sitecoreContext,
    children,
    itemId,
    fields,
    hideIfNotPageEditing,
    databaseName,
    language,
    ...otherProps
}) => {
    // check if we're in experience editor and configured properly
    const shouldRender = sitecoreContext.pageEditing && itemId && fields && fields.length;

    // hide if not in page editing mode and prop is passed telling us to hide
    if (!shouldRender && hideIfNotPageEditing) {
        return null;
    }

    // if we're configured properly, wrap in edit frame.
    const WrapperComponent = shouldRender ? FieldEditFrameWrapper : React.Fragment;

    // build the props for our edit frame
    const WrapperProps = {
        itemId,
        fields,
        databaseName: databaseName || sitecoreContext.route.databaseName,
        language: language || sitecoreContext.language,
        sitecoreContext,
        ...otherProps
    }

    return <WrapperComponent {...WrapperProps}>
        {children}
    </WrapperComponent>
}

FieldEditFrameComponent.defaultProps = {
    itemId: '',
    fields: [],
    header: 'Edit Fields',
    icon: '/temp/iconcache/people/16x16/cubes_blue.png',
    disabledIcon: '/temp/cubes_blue_disabled16x16.png',
    command: '{70C4EED5-D4CD-4D7D-9763-80C42504F5E7}'
};

export const FieldEditFrame = withSitecoreContext()(FieldEditFrameComponent);

Content of packages/sitecore-jss-react/src/components/FieldEditFrame.tsx:

export { DateField } from './components/Date';
export { Link } from './components/Link';
export { File } from './components/File';
export { FieldEditFrame } from './components/FieldEditFrame';
export { VisitorIdentification } from './components/VisitorIdentification';
export { SitecoreContext, SitecoreContextFactory, SitecoreContextReactContext } from './components/SitecoreContext';
export { withSitecoreContext } from './enhancers/withSitecoreContext';
Improve this answer
2
6

Official Edit Frame support was added in version 21.1.0 of the Headless Services SDKs.

Example usage can be seen in the Styleguides for each of the SDKs:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.