V13: Get items of area in custom block grid item v...
# help-with-umbracoc
CaptTaifun
07/28/2024, 10:35 PMI am currently creating custom block views for the back office.
I have a block type “Tabs” and a block type “Tab”. In tabs, I want to display the titles of the tab properties as, well, tabs. And the actual content (also an area) of the tab type should be added as tab-content.
This works so far, with the following code. My problem is:
As long as I output the tag in the tab.html, it fits, each area is created in its own tab-content div (as defined in tabs.html).
But as soon as I want to render the areas of the tab in tab.html, the content of all tabs is in a single tab-content div. Why is that? What am I doing wrong? How do I fix this?
Can someone please help me?
tabs.html:
{{ getBlockTitle(block) }}
<div class="tab-content"
ng-repeat="block in blocksInMainArea"
ng-include="getBlockTemplateUrl(block)"
ng-init="block = block.$block.layout.$block">
tab.html:
{{ block.data | json }}
tabsBlock.controller.js:
angular.module("umbraco")
.controller("tabsBlockController", function ($scope) {
const blockGridItem = $scope.$parent.$parent.block;
$scope.blocksInMainArea = blockGridItem.layout.areas.find(area => area.$config.alias === "main").items;
$scope.getBlockTemplateUrl = function (block) {
return block.config.view;
};
$scope.getBlockTitle = function (block) {
return block.$block.data.title;
};
});
d
Dean Leigh
07/30/2024, 5:24 AMHi @CaptTaifun I have a Tabs in Umbootstrap, please feel free to use the code: https://marketplace.umbraco.com/package/umbraco.community.templates.umbootstrap
c
CaptTaifun
08/02/2024, 9:00 PM@Dean Leigh
Hey man, I just wanted to tell you that I love you.
I just saw the reply today and looked at it straight away.
But unfortunately there's a problem.
The tabs in the frontend work, but not in the backend.
I got the frontend tabs to work myself, but when I click on a tab in the backend, nothing happens.
When I click on "Tab Two" (in the screenshot) nothing happens. Apparently I can't even click on it, I can only hover over it.
https://cdn.discordapp.com/attachments/1267248966232313947/1269037018952765530/image.png?ex=66ae9a52&is=66ad48d2&hm=a091bbfafad8a213a3d78af6bdc530edee7aa28d7468db0116d26e0125b3fb7f&
CaptTaifun
08/02/2024, 9:23 PMThis is my current code (shortened):
// tabs.html
.tab-content {
display: none !important;
}
.tab-content.show {
display: block !important;
}
<uui-tab ng-repeat="block in blocksInMainArea"
ng-click="selectTab($index)"
ng-attr-active="{{ $index === 0 ? 'active' : undefined }}">
{{ getBlockTitle(block) }}
<div class="tab-content"
ng-repeat="areaItem in blocksInMainArea"
ng-class="{ 'show': isSelectedTab($index) }">
// tabsBlock.controller.js
angular.module("umbraco")
.controller("tabsBlockController", function ($scope) {
const blockGridItem = $scope.$parent.$parent.block;
$scope.blocksInMainArea = blockGridItem.layout.areas.find(area => area.$config.alias === "main").items;
$scope.selectedTab = 0;
$scope.getBlockTemplateUrl = function (block) {
return block.$block.config.view;
};
$scope.getBlockTitle = function (block) {
return block.$block.data.title;
};
$scope.isSelectedTab = function (index) {
return $scope.selectedTab === index;
};
$scope.selectTab = function (index) {
$scope.selectedTab = index;
};
});
// tab.html
// tabBlock.controller.js
angular.module("umbraco")
.controller("tabBlockController", function ($scope) {
$scope.color = "#" + Math.floor(Math.random() * 16777215).toString(16);
});
Coloured div work, just no idea how to get the data of a single tab block to be displayed
https://cdn.discordapp.com/attachments/1267248966232313947/1269042826948116552/image.png?ex=66ae9fbb&is=66ad4e3b&hm=fc9396bc9b5a089fad0d5ba5ecf58154c01d5af78728d54ef46e6a035145ddca&
https://cdn.discordapp.com/attachments/1267248966232313947/1269042827250372668/image.png?ex=66ae9fbb&is=66ad4e3b&hm=e0aa370e53f94a69ff369967ceb59f4469ed7554dd8cd0bbcdaca6d1ab3bf2a2&
d
Dean Leigh
08/03/2024, 6:24 AMThe tabs are not clickable in the back office as it is the Block that is being edited rather than a single tab. Therefore when the user clicks it, it open the Block List Editor that contains the tabs.
https://cdn.discordapp.com/attachments/1267248966232313947/1269179068729921556/msedge_ncvjDV0JqY.mp4?ex=66af1e9e&is=66adcd1e&hm=aa2ab636a674bded3ee5eceee3814616ccb07142e9bcd41e72263ec84c20cf59&
c
CaptTaifun
08/03/2024, 9:12 AMYes, I'm aware of that.
But my point is that I need the functionality for our back office to be able to click on the tabs in the back office.
And depending on which tab is active, the respective tab content should also be displayed.
To be able to edit a tab, you have to click on the respective tab content or on the pencil to edit it.
If none of this works, then I'll have to come up with something else anyway.
But as you can see, I have at least managed to create and use different tab contents (as you can see from the colored DIVs).
But I can't get the content of the individual tabs rendered. As soon as I do that, everything is in the 1st tab-content div again and not split across all of them.
d
Dean Leigh
08/03/2024, 10:45 AMOK so you can do that too.
However the user would initially have to click on the whole tab component which could then open an individual tab and you can apply the block rendering preview to the block list items in exactly the same way so each tab would preview its contents
c
CaptTaifun
08/04/2024, 12:50 PMI'm sorry, but that doesn't really get me anywhere.
Among other things, I don't understand why you should query the entire content again if you already have the content anyway.
But well, thanks for trying, but the package doesn't get me any further.
Of course, I tried it too, it looks quite nice, but at least I can't do anything with it.
I now have the following:
// tabsBlock.controller.js
angular.module("umbraco")
.controller("tabsBlockController", function ($scope) {
const blockGridItem = $scope.$parent.$parent.block;
$scope.blocksInMainArea = blockGridItem.layout.areas.find(area => area.$config.alias === "main").items;
$scope.getBlockTemplateUrl = function (block) {
return block.$block.config.view;
};
$scope.getBlockTitle = function (block) {
return block.$block.data.title;
};
});
// tabs.html
{{ getBlockTitle(block) }}
<div class="tab-content"
ng-repeat="block in blocksInMainArea">
I have removed the custom view from the tab item, so now it's only about my "Tabs" item:
I get the titles of the tab items rendered (Screenshot).
But I don't get the tab items themselves rendered.
$scope.blocksInMainArea is of course not empty, but has 2 items.
Unfortunately, I can't find the implementation of "umb-block-grid-render-area-slots" anywhere. Maybe that would help me. But I just want to change the rendering of "tabs", but then go back to the "standard rendering" for everything in it, which you get, for example, when you switch on the sort mode.
https://cdn.discordapp.com/attachments/1267248966232313947/1269638586484133931/image.png?ex=66b0ca93&is=66af7913&hm=0ffcbf9eba080beef1dfc5e8562004aaf83436d1f64e6c33007d575ed998ea6d&
38 Views