Skip to content

How to display a custom app within an entrty? Widgetnamespace = 'app' #1415

@NateWichman

Description

@NateWichman

I have an app that overrides an entry. I am trying to display all the fields. One of the fields is a another custom JSON app. That app comes up blank when I pass in it's widgetId (the widgetnamespace is 'app'). Is there any way around this?

import { useEffect, useMemo } from "react"
import { EditorAppSDK, FieldAppSDK } from "@contentful/app-sdk"
import {
  Field as BaseField,
  FieldWrapper,
} from "@contentful/default-field-editors"
import { Heading, Subheading } from "@contentful/f36-components"
import { /* useCMA, */ useSDK } from "@contentful/react-apps-toolkit"

import styles from "./EntryEditor.module.css"

const Entry = () => {
  const sdk = useSDK<EditorAppSDK>()

  const getFieldAPI = (fieldId: string, sdk: EditorAppSDK) =>
    sdk.entry.fields[fieldId].getForLocale(sdk.locales.default)

  const getFieldExtensionSdk = (fieldId: string, sdk: EditorAppSDK) =>
    Object.assign({ field: getFieldAPI(fieldId, sdk) }, sdk)

  const fields = useMemo(
    () =>
      Object.values(sdk.entry.fields).map((field) => {
        const control = sdk.editor.editorInterface.controls!.find(
          (control) => control.fieldId === field.id
        )
        return {
          field,
          sdk: getFieldExtensionSdk(field.id, sdk),
          control,
        }
      }),
    [sdk.entry.fields]
  )

  return (
    <div>

      {fields.map((f) => (
        <FieldWrapper
          key={f.field.id}
          sdk={f.sdk as FieldAppSDK}
          name={f.field.id}
        >
          <div>{f.control?.widgetId}</div>

          <BaseField
            sdk={f.sdk as FieldAppSDK}
            isInitiallyDisabled={false}
            widgetId={f.control?.widgetId}
          />
        </FieldWrapper>
      ))}
    </div>
  )
}

export default Entry

Metadata

Metadata

Assignees

No one assigned

    Labels

    staleUsed to mark when there was no activity for a set period of time

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions