<![CDATA[Directus new extension layout]]>Can someone help in what format we need to upload the layout extension for directus? does directus app automatically take the layout from it?

6d6eae79-c930-48de-b11e-9dfa3e29d79c-image.png

if yes Can someone guide me how to compile the directus layout with minimal changes and upload it here directly

]]>https://forum.cloudron.io/topic/6884/directus-new-extension-layoutRSS for NodeThu, 16 Apr 2026 23:21:40 GMTTue, 26 Apr 2022 15:00:40 GMT60<![CDATA[Reply to Directus new extension layout on Sat, 07 May 2022 16:09:03 GMT]]>@girish Thanks Girish. It worked. but there is a challenge with directus is they don't have an option to copy the existing layout of directus and make a small change and create it as a new extension. it doesn't help. we should develop from scratch as per them 😞

]]>https://forum.cloudron.io/post/47405https://forum.cloudron.io/post/47405Sat, 07 May 2022 16:09:03 GMT<![CDATA[Reply to Directus new extension layout on Thu, 28 Apr 2022 17:16:56 GMT]]>@Jeyakumarrathnaselvi The index.js needs to be inside tabularview directory.

Let me preface by saying I have little to no idea about Directus. This is my index.js:

import{openBlock as e,createElementBlock as l,createElementVNode as o,toDisplayString as n,ref as t}from"vue";var r={inheritAttrs:!1,props:{collection:{type:String,required:!0},name:{type:String,required:!0}}};r.render=function(t,r,i,u,a,c){return e(),l("div",null,[o("p",null,"Name: "+n(i.name),1),o("p",null,"Collection: "+n(i.collection),1)])},r.__file="src/layout.vue";var i={id:"custom",name:"Helloworld",icon:"box",component:r,slots:{options:()=>null,sidebar:()=>null,actions:()=>null},setup:()=>({name:t("Helloworld Layout")})};export{i as default};

Which I uploaded like this into extensions/layouts/helloworld and restarted the app:

ca41667d-7212-4698-b705-955b472793ae-image.png

I can then see the layout:

f0f0c0d4-c7be-4f0e-83ee-98d296494948-image.png

]]>https://forum.cloudron.io/post/46830https://forum.cloudron.io/post/46830Thu, 28 Apr 2022 17:16:56 GMT<![CDATA[Reply to Directus new extension layout on Thu, 28 Apr 2022 09:43:35 GMT]]>@girish 35d77980-7935-470a-8d89-41c6d3fa8435-image.png

still no effect. pls guide

]]>https://forum.cloudron.io/post/46793https://forum.cloudron.io/post/46793Thu, 28 Apr 2022 09:43:35 GMT<![CDATA[Reply to Directus new extension layout on Wed, 27 Apr 2022 16:18:17 GMT]]>@Jeyakumarrathnaselvi It looks like maybe you did not restart the app after uploading ? Just guessing because the file permissions of index.ts is still 'root'. It should become 'cloudron' after restart.

]]>https://forum.cloudron.io/post/46751https://forum.cloudron.io/post/46751Wed, 27 Apr 2022 16:18:17 GMT<![CDATA[Reply to Directus new extension layout on Wed, 27 Apr 2022 12:26:03 GMT]]>@jdaviescoates No it didn't help

]]>https://forum.cloudron.io/post/46721https://forum.cloudron.io/post/46721Wed, 27 Apr 2022 12:26:03 GMT<![CDATA[Reply to Directus new extension layout on Wed, 27 Apr 2022 10:46:50 GMT]]>Just in case, presumably you've tried clearing browser cache etc? 🙂

]]>https://forum.cloudron.io/post/46720https://forum.cloudron.io/post/46720Wed, 27 Apr 2022 10:46:50 GMT<![CDATA[Reply to Directus new extension layout on Wed, 27 Apr 2022 07:10:58 GMT]]>@girish Thanks Girish, Tried it but the new layout is not reflected in directus. don't know why? can someone guide

43bbe75e-5cdf-4869-ac8b-e7689fba33c4-image.png

unknown (2).png

]]>https://forum.cloudron.io/post/46711https://forum.cloudron.io/post/46711Wed, 27 Apr 2022 07:10:58 GMT<![CDATA[Reply to Directus new extension layout on Tue, 26 Apr 2022 15:50:10 GMT]]>@Jeyakumarrathnaselvi Not an expert on directus, so your mileage with my suggestion might vary.

Have you seen https://docs.directus.io/extensions/creating-extensions/ ? I ran npm init directus-extension on my PC:

$ npm init directus-extension
Need to install the following packages:
  create-directus-extension
Ok to proceed? (y) y
npm WARN deprecated @types/cssnano@5.1.0: This is a stub types definition. cssnano provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/pino@7.0.5: This is a stub types definition. pino provides its own type definitions, so you do not need this installed.
This utility will walk you through creating a Directus extension.

? Choose the extension type layout
? Choose a name for the extension helloworld
? Choose the language to use javascript
✔ Done

Your layout extension has been created at /home/girish/tmp/foo/helloworld

Build your extension by running:
  cd helloworld
  npm run build

I then built it and got a dist/index.js . Per https://docs.directus.io/extensions/creating-extensions/#deploying-your-extension, I should upload that file as extensions/layouts/helloworld/index.js . I haven't tried all that since I don't know much about directus, maybe others here know.

]]>https://forum.cloudron.io/post/46668https://forum.cloudron.io/post/46668Tue, 26 Apr 2022 15:50:10 GMT