Placement: how to define placement in my Custom Theme, and how to know existent placement in other Themes

[MarGraz]

Hello everyone,

I'm diving into the world of "Placement" but I need some clarification. This topic is addressed in the documentation, as well as in the "Training Demo" module, specifically in the "Display Management" section. Additionally, I've watched this video from the Dojo Course 3 for further insights.

To give you a brief overview, I've implemented my MyTextFieldDisplayDriver : ContentFieldDisplayDriver<MyTextField> within my CustomTheme module. I used the ocfielddriverfull code snippet, I've managed to utilize the Location() method (as demonstrated here) in the Display and Edit override methods, to specify the placement of my field shape. However, the process for defining these positions remains unclear to me 😶‍🌫️

This is why I have several questions:

1. I understand that Modules can have a Placement.json, but I'm wondering how Placement can be defined within a custom theme. Specifically, how can I tag specific parts for use, such as "Admin", "Content:10" (as showed here), I need first to define it in my Layout.cshtml?
2. Is there a way to know the available placements of modules developed by others?
3. How can I determine the placement options available in the Admin backoffice UI, especially since MyTextFieldDisplayDriver also uses a Location() method in the Edit override?
4. Do themes typically come with graphical maps of all available placements, similar to the "Module Map" used by Joomla? This seems like a potentially useful feature that could be added to each theme in the theme gallery to show the available positions in backend and frontend themes.

Here an example of Joomla "Module Map" feature:

Thank you so much for any reply

[MarGraz]

Maybe what I'm looking for is "display types", as explained in the documentation about zones differentiators. There's a Content-{Content Item name type}.cshtml file that describes the page. However, I'm wondering why there is no reference or link redirecting to the "display types" page on the "placement" page. Are they two different concepts? 🤔

For what I've learned, it seems that the positioning described by a "Theme", takes precedence over templates and other definitions, as described here.

Questions are more or less the same:

1. To achieve my goal of styling shapes in a specific way and positioning them inside my custom theme, what is the best practice? Is better to use "display types" with Content-{...}.cshtml, or use Placement.json?
2. In my DisplayDriver, how can I define specific parts to use, such as "Admin", "Content:10" (as shown here) in the Location() method?
3. Regarding the Admin UI, how can I position my custom field in a specific place if I don't know the available positions in the Admin theme?

Thank you

[MarGraz]

Hi everyone, could someone please assist me with the questions I asked in this post? 😊

Thank you

[MarGraz]

Hi @aaronamm, as mentioned in the chat during the YouTube theme development live session, here is my discussion about the Placement.

Thank you 😊

[hishamco]

Why not use zones?

[MarGraz]

@hishamco thank you for your reply 😊

I never tried zones. Do they also work with Razor views, or they are specific for widgets?

What I'm looking for is to define precise areas inside my Layout.cshtml (or similar place) and assign it names, where I can display Shape via MyCustomDisplayDriver. Right now, it's not clear to me how to define names for these areas.

Thank you

[hishamco]

You can render zones in Razor using @await RenderSectionAsync("ZoneName", required: false)

For example:

https://github.com/OrchardCMS/OrchardCore/blob/768459c5a25ac05aa2f0304353892b4ff434444c/src/OrchardCore.Themes/TheAdmin/Views/Layout.cshtml#L81C39-L81C52

Usage:

OrchardCore/src/OrchardCore.Modules/OrchardCore.Workflows/Views/Workflow/Details.cshtml

Lines 8 to 17 in 768459c

	<zone name="Breadcrumbs">
	<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
	<li class="breadcrumb-item"><a asp-action="Index" asp-controller="WorkflowType">@T["Workflows"]</a></li>
	<li class="breadcrumb-item"><a asp-action="Edit" asp-controller="WorkflowType" asp-route-id="@Model.WorkflowType.Id">@Model.WorkflowType.Name</a></li>
	<li class="breadcrumb-item"><a asp-action="Index" asp-controller="Workflow" asp-route-workflowtypeid="@Model.WorkflowType.Id">@T["Instances"]</a></li>
	<li class="breadcrumb-item active" aria-current="page">@Model.Workflow.WorkflowId</li>
	</ol>
	</nav>
	</zone>