Component name is missing when we drag and drop in Page | Adobe Higher Education
Skip to main content
T
Tessa_learner1
Level 4
December 22, 2022
Beantwortet

Component name is missing when we drag and drop in Page

  • December 22, 2022
  • 1 Antwort
  • 1263 Ansichten

Hi Team, 

I've developed custom component like the below, it's not showing the name of the component when we drag and drop. Like it should display like a Title component. In the below image the date picker should also come like title on page.

 

Thanks

 

Dieses Thema wurde für Antworten geschlossen.
Beste Antwort von nitesh_kumar-1

Hi @tessa_learner1 ,

 

Looks like you do not have any placeholder text display logic for your component.

 

You need to add a placeholder in your component HTL to display it. This will be displayed as default when nothing is configured in the dialog (which is the case when you first drag and drop)

You can use /apps/core/wcm/components/commons/v1/templates.html 

 

 

 

<div data-sly-use.model="yourmodel" data-sly-use.templates="core/wcm/components/commons/v1/templates.html" <sly data-sly-call="${templates.placeholder @ isEmpty = ${model.isEmpty}, classAppend='cmp-text'}"></sly>

 

 

 

If there is no sling model for your component, you can check the property directly on HTL as well.

 

For reference implementation, you can check components like "/apps/core/wcm/components/text/v2/text"

 

Regards,

Nitesh

 

1 Antwort

nitesh_kumar-1
Adobe Employee
nitesh_kumar-1Adobe EmployeeAntwort
Adobe Employee
December 22, 2022

Hi @tessa_learner1 ,

 

Looks like you do not have any placeholder text display logic for your component.

 

You need to add a placeholder in your component HTL to display it. This will be displayed as default when nothing is configured in the dialog (which is the case when you first drag and drop)

You can use /apps/core/wcm/components/commons/v1/templates.html 

 

 

 

<div data-sly-use.model="yourmodel" data-sly-use.templates="core/wcm/components/commons/v1/templates.html" <sly data-sly-call="${templates.placeholder @ isEmpty = ${model.isEmpty}, classAppend='cmp-text'}"></sly>

 

 

 

If there is no sling model for your component, you can check the property directly on HTL as well.

 

For reference implementation, you can check components like "/apps/core/wcm/components/text/v2/text"

 

Regards,

Nitesh

 

    T
    Tessa_learner1Autor
    Level 4
    December 22, 2022

    Hi @nitesh_kumar-1  

    Thank you so much for your reply. Yes I haven't added template and placeholder, after adding it I can able to view the component name as a placeholder. 

     

    Thank you.

    Allgemeine NutzungsbedingungenAccessibility statement

    Loading footer...