Expand my Community achievements bar.

SOLVED

Extensions/plugins for the new CF Editor

Avatar

Community Advisor

Hi everyone,

I started working on a few extensions/plugins for the new CF Editor, such as showing/hiding fields based on a selection, custom color picker field, custom autocomplete field, etc. Following the docs provided here https://developer.adobe.com/uix/docs/services/aem-cf-editor/code-generation/ is going mostly ok so far, however I do have a few questions I would like to clarify with the community:

  1. I assume each plugin should have its own separate Git repo and project in Adobe IO based on the App Builder template. Can anyone confirm this assumption?
  2. If I do separate my plugins, I don't want them to load on CF models where they are not used. Is there a way to limit the plugin to only load on specific CF models or should I raise a feature request?
  3. I don't know why Adobe is writing React code in JS files in the project templates. Visual Studio obviously complains about this as it should be in JSX files. Does anyone know if it's safe to just rename the files in JSX?

I will share my learning once I am done, so stay tuned for blog posts that will follow.

 

Thanks in advance,

Daniel

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 8

Hi @daniel-strmecki , I too have been writing CF extensions and UE extensions. The example projects built by Adobe works fine. And I am able to tweak and add customizations. Sharing how I have implemented in my project

 

  1. I built into a monorepo using pnpm-workspace. I have webactions, websrc MFE, CF extensions and UE extension. Each are packages under single monorepo. Common depedencies of aio are in parent package.json and child packages carry specific dependencies. Tooling like linting, testing is at parent. Now deployment was challenging. Based on which files modified in child package, the deploy.yaml has to build specific child package and deploy to specific environment. But overall, single monorepo for ALL AIO projects. 
  2. I haven't tried this. Should check how todo at AppRegistry
  3. I am writing .tsx. Sudnt hurt. I created tsconfig.json and app works fine. One tip, make sure to delete .parcel-cache folder to prune. 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 8

Hi @daniel-strmecki , I too have been writing CF extensions and UE extensions. The example projects built by Adobe works fine. And I am able to tweak and add customizations. Sharing how I have implemented in my project

 

  1. I built into a monorepo using pnpm-workspace. I have webactions, websrc MFE, CF extensions and UE extension. Each are packages under single monorepo. Common depedencies of aio are in parent package.json and child packages carry specific dependencies. Tooling like linting, testing is at parent. Now deployment was challenging. Based on which files modified in child package, the deploy.yaml has to build specific child package and deploy to specific environment. But overall, single monorepo for ALL AIO projects. 
  2. I haven't tried this. Should check how todo at AppRegistry
  3. I am writing .tsx. Sudnt hurt. I created tsconfig.json and app works fine. One tip, make sure to delete .parcel-cache folder to prune. 

Avatar

Community Advisor

Thanks @sarav_prakash, based on your answer and my findings so far I will:

  • Put all plugins in a single repo, since they cannot be loaded separately per content fragment model, it doesn't make sense to split them
  • Try to include Typescript and change generated files from JS to TSX

Will also open a few feature requests for the things I see are missing support.