jstree hide attribute from the tree - jstree

when i submit following code on this page http://uimonster.com/uimexamples/example_01/example_01a.html i get treeview from this view i want to hide attribute nodes.. how can i hide these extra nodes.
<bussinessline>
<PRODUCTGROUPS>
<Name ID="123"> ABC</Name>
<Name ID="456"> XYZ</Name>
<Name ID="789">PQR</Name>
</PRODUCTGROUPS>
</bussinessline>

If you can set the "state" of the nodes containing the nodes you don't want to see to "closed", that will hide them until you open the parent node. You would do this in your data. See jsTree, JSON and MVC3 objects. How to structure data for help.

Related

react-leaflet-draw - onEditStart/Stop events cumulates when trying to edit multiple featureGroups

I have a React application where a react-leaflet#2.7.0 + react-leaflet-draw#0.19.0 map is displaying multiple FeatureGroup components containing polygons.
On the right end side of the app is a clickable list of the feature groups names.
The groups can be selectively "activated" by clicking the names, so if a feature group is active, the EditControl therein is rendered. Only one group can be active at a time.
My problem
when I switch from one group to another and then click the edit button in EditControl, the onEditStart/Stop events of the previously active group still fire, along with the new ones. The more I switch between groups, the more events are fired.
Update:
The issue seems to be that EditControl is never unmounted, even if upon the parent state change it doesn't get rendered. If I add a random key prop to it, the issue is resolved, but then other issues occur.
I don't yet have a minimal code example to share, but to give you an idea of the implementation here is a schema:
<App>
<Map>
<MapContent id="foo">
<FeatureGroup>
<EditControl />
</FeatureGroup>
</MapContent>
<MapContent id="bar">
<FeatureGroup>
<EditControl />
</FeatureGroup>
</MapContent>
</Map>
<GroupSelector />
</App>
Except App (root component), MapContent (very basic wrapper: checks if the group is active) and GroupSelector (clickable list), all other components are from react-leaflet and react-leaflet-draw.
Flow
On click, GroupSelector updates the state of App to set an activeGroupID (i.e. "foo") and MapContent will render its EditControl only if its id matches the activeGroupID
I hope this description makes sense. Any help would be greatly appreciated!

Cannot pass model data from aggregation binding to block for lazy loading in xml view

I'm building an SAPUI5 Fiori application from the project template "SAP Fiori Master-Detail Application" in SAP Web IDE. I connect to an OData Service that gives me this nested structure (bold text represents a navigation property):
File
Properties...
ToRegister (returns collection of Registers)
Properties...
ToDocumentType (returns collection of DocumentTypes)
Properties...
ToDocument (returns collection of Documents)
Properties...
Displaying data in the Detail View is very slow, so I'm trying to use sap.uxap.ObjectPageLayout's lazy loading feature. For that, I have to extract parts of my view and put them into a custom block. This is accomplished by deriving from sap.uxap.BlockBase, according to this example (code here). Unfortunately, I couldn't find any examples that use aggregations/aggregation bindings.
I use XML Views. My Detail View looks like this:
<mvc:View
xmlns="sap.uxap"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m">
<ObjectPageLayout sections="{ToRegister}">
<sections>
<ObjectPageSection title="{RegisterName}" subSections="{ToDocumentType}">
<subSections>
<ObjectPageSubSection title="{Description}" >
<blocks>
<m:List items="{ToDocument}">
<m:CustomListItem>
...code for displaying properties...
</m:CustomListItem>
</m:List>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
</sections>
</ObjectPageLayout>
</mvc:View>
This code does not use custom blocks. This is the slow version, but it works and displays the data correctly. Notice that the bold navigation properties are placed in curly braces (e.g. <m:List items="{ToDocument}">).
For my custom block, I extracted the <m:List> part into a seperate view:
<mvc:View
xmlns="sap.uxap"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m">
<m:List items="{Documents}">
<m:CustomListItem>
...code for displaying properties...
</m:CustomListItem>
</m:List>
</mvc:View>
Notice here that the property in the curly braces is not {ToDocument} anymore but {Documents}. That's because of the model mapping that has to be introduced in the original Detail View for this to work (see section Model Mapping in this article). I modified the Detail View like this:
<mvc:View
xmlns="sap.uxap"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m"
xmlns:attachmentblock="pft7.blocks.FileAttachmentList">
<ObjectPageLayout sections="{ToRegister}">
...
<blocks>
<attachmentblock:Block mode="Expanded">
<ModelMapping
externalModelName="ToDocumentType"
internalModelName="Documents"
externalPath="/ToDocument" />
</attachmentblock:Block>
</blocks>
...
</ObjectPageLayout>
</mvc:View>
It's pretty much the same. I added the xml namespace attachmentblock (which points to my custom block) and used it to replace the <m:List> child of <blocks>. Notice the attribute internalModelName of the <ModelMapping> node. It can be freely chosen and just has to be the same as the model name used in the block's view.
Finally, the problem: With this modification, my Detail View does not display the document properties anymore. Instead, it just displays the text "No data". I added some dummy text and it was properly displayed in my Detail View, so the actual inclusion of the custom block itself seems to work.
I suspect that I got the <ModelMapping> part wrong, but I don't know how to set the attributes correctly. I couldn't find any examples that use aggregations and navigation properties for this, so I'm pretty clueless. The console does not log any errors.
Can you check whether it works if you use an “Object Page with LazyLoading without blocks” as seen in this sample here?
In addition to this, you might also want to check on the reasons for the slow “Display of Detail View” via OData service.
Very often this is caused by long database access times.
If your backend is an R/3-ABAP system, you might want to check your OData service with an SQL-Trace (transaction ST05)
for long database response times caused by unnecessary requests or missing indexes.

SAPUI5: How to create a control hierarchy?

I hope you can help me with this. After reading all the documentation several times, googling for days, etc I don't find the way to do what i'm going to explain in a clean way, and in think I'm missing something because it's a really basic scenario.
I'm working with oData models, in this case 2 named models, "Model1", "Model2". Now what I want is to show a "parent" ComboBox based on an oData path, and a table that changes its items depending on the selection, in other words.
Model1 { //JSON representation of the data.
Accounts:[
"account 1": {invoices: ["invoice1", "invoice2", "invoice3"]},
"account 2": {invoices:["invoice4", "invoice5"]}
]
}
Combo Box:
<... items={Model1>/Accounts} /> -- This works and shows Account 1, and Account2.
Table
<Table... items="{Model1>Invoices}">
..
<items>
....
</items>
</Table>
What I want is the table to change it's context to the account selected on the ComboBox. The point is that this works, but the first time it loads the view, as there is no account selected, it calls the wrong odata path MYSERVICE/Invoices, instead of doing nothing, as the Account is not set yet, and the path for the invoices, once selected the account, shoud be MYSERVICE/Account('Account1')/Invoices for example.
I know I can achieve this with code, but I'm sure there must be a clean way to do this.
Seriously, this is driving me crazy.
Thanks for your help.
Are you sure that
items="{Model1>Invoices}"
triggers odata call? Because this is a relative path (without leading slash), normally it should not do the call.
What you can do:
Handle ComboBox selectionChange event;
In this event handler, create a path that you will bound the table to. In your case the path could look like this: "/Account(Account1)" - "/{EntitySetName}({KEY})". You can make use of createKey method of ODataModel2;
Set the table's context using the path:
oTable.bindObject({
path: sPath,
model: "Model1",
parameters: {
$expand: "Invoices"
}
});
Once the context is set, the relative binding will start working automatically and table will get the "Invoices"
I assume that the Account and Invoices are linked via navigation property and one-to-many cardinality, that's why the $expand parameter will load the corresponding invoices.

Data attribute in XML View elements

I'm trying to add data attributes to elements in a XML View as below:
<core:FragmentDefinition
xmlns="sap.m"
<VBox data-help-id="Some.String.Here">
...
</VBox>
</core:FragmentDefinition>
but couldn't find how to do it, unless I assign them via Controller.
Tried using CustomData namespace, but it only adds data, without adding the HTML attribute to the DOM element.
Any idea?
Thanks!
actually you can do something very close and associate data to your xmlView. This is available for xml views and more. Check this url for more details: Custom Data - Attaching Data Objects to Controls
What you would need to do is add a custom namespace to your xmlView:
xmlns:dataHelp="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
...
<core:FragmentDefinition
xmlns="sap.m"
<VBox dataHelp:id="Some.String.Here" id="myBox"
...
</VBox>
</core:FragmentDefinition>
you are then able to set and consume this attribute in your binding and javascript/controller/event handler:
sap.ui.getCore().byId("myBox").data("id") // = Some.String.Here
You can only influence the attributes written to the DOM using the standard control properties. If the standard properties don't provide you with a way to set the right HTML attibutes, and you still want to get your own HTML attributes in the DOM, you'll need to subclass the control and write your own renderer. When you write your own renderer, you have full control over what's written to the DOM.
You can find more information on writing custom controls in Step 34 of the SAPUI5 Walkthrough.

MVVM Prism Nested Regions Can't Find Child Regions

I have a Menu (Telerik RadMenu) that has nested regions defined in the Shell. In my modules I will register the modules menu or toolbar items with these regions. Everything works fine for the root regions, but when I try and add something to a child region, such as the File region on the Menu, I get the error "The exception message was: The region manager does not contain the FileMenuRegion region."
However like I said if I change this code
regionManager.Regions[RegionNames.FileMenuRegion].Add(menuItem);
to this
regionManager.Regions[RegionNames.MainMenuRegion].Add(menuItem);
everything works fine. Below is the XAML for my menu so you can see the region names and how they are constructed. Any help would greatly be appreciated as this is bewildering and driving me crazy.
Menu
<telerikNavigation:RadMenu x:Name="menuMain" DockPanel.Dock="Top" prismrgn:RegionManager.RegionName="{x:Static i:RegionNames.MainMenuRegion}" telerik:StyleManager.Theme="{Binding Source={StaticResource settings}, Path=Default.CurrentTheme}">
<telerikNavigation:RadMenuItem Header="{x:Static p:Resources.File}" prismrgn:RegionManager.RegionName="{x:Static i:RegionNames.FileMenuRegion}">
<telerikNavigation:RadMenuItem Header="{x:Static p:Resources.Exit}" Command="{Binding ExitCommand}">
<telerikNavigation:RadMenuItem.Icon>
<Image Source="../Resources/Close.png" Stretch="None" />
</telerikNavigation:RadMenuItem.Icon>
</telerikNavigation:RadMenuItem>
</telerikNavigation:RadMenuItem>
</telerikNavigation:RadMenu>
The above XAML goes against the design of PRISM regions.
All regions are supposed to to be attached to controls derived from ContentControl. The process of loading region registered views replaces the content of the region container with any matching views registered for that region name. That removes your nested region name so the error you see is correct.
The idea is, that a view registered for a specified region name can itself contain other regions.