0

I have created a tnt Sidebar and want to insert Checkboxes and Combobox in it.

This should be the result:

enter image description here

Currently it looks like this:

enter image description here

So the NavigationItems should be replaced by Checkboxes. f.E. sap.m.CheckBox

 <content>
        <tnt:ToolPage>
            <tnt:sideContent>
                <tnt:SideNavigation  id="sideNavigation" selectedKey="subItem3">
                    <tnt:NavigationList>
                        <tnt:NavigationListItem text="Item 1" icon="sap-icon://employee">
                            <tnt:NavigationListItem  text="Sub Item 1" >
                            </tnt:NavigationListItem>
                            <tnt:NavigationListItem text="Sub Item 2" />
                            <tnt:NavigationListItem text="Sub Item 3" id="subItem3" key="subItem3" />
                            <tnt:NavigationListItem text="Sub Item 4" />
                        </tnt:NavigationListItem>
                        <tnt:NavigationListItem text="Item 2" icon="sap-icon://building">
                            <tnt:NavigationListItem text="Sub Item 1" />
                            <tnt:NavigationListItem text="Sub Item 2" />
                            <tnt:NavigationListItem text="Sub Item 3" />
                            <tnt:NavigationListItem text="Sub Item 4" />
                        </tnt:NavigationListItem>
                    </tnt:NavigationList>

I tried to insert a sap.m.CheckBox instead of a normal NavigationListItem but then I get an error, that the "CheckBox" class is under the "items" aggregation and must match the "NavigationListItem" type.

I know Fiori/UI5 is limited somehow and you shouldn't mix up too much different namespaces, but is there some workaround?

Kind regards Sebastian

Sandra Rossi
  • 11,934
  • 5
  • 22
  • 48
Sebastian Kronschläger
  • 83
  • 6
  • 1
    It is possible, but not without some effort. The `NavigationList` accepts only `NavigationListItem`s, but the trick is, you can extend this class with your own, add an aggregated control and render it. – fmi21 Jul 06 '22 at 17:35
  • @fmi21Okay thank you. Could you provide me some more informations or links how to do that ? – Sebastian Kronschläger Jul 06 '22 at 18:26
  • 1
    Something like [this](https://pastebin.com/gKAQ5qv6). This is only a starting point, as said it is a bit of an effort but is the most serious option IMO, not relying on CSS and reusing the native `sap.m.NativeList` side panel, if you are serious about implementing this. I've personally implemented a control following this plan, for a `sap.m.Button` inside `sap.m.IconTabBar` [here](https://pastebin.com/QxU5gL7z). The missing methods I've copied over from the source. It's far from perfect, we later abandoned it due to the maintenance effort required, but can still serve you as guidance – fmi21 Jul 07 '22 at 19:09

1 Answers1

1

I'm not sure what you are trying to do, but maybe creating a List or TreeList with a CustomListItem would help you more. You can put it into a SplitApp and have a "Navigation like" Panel too, but fully customizable.

Patrick
  • 146
  • 2