Dear Community User! We are updating our platform to a new system.
Read more: Important information on the platform change.

cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

Integrate Datalayer Tree in Frontend

Integrate Datalayer Tree in Frontend

mwaldenm
New Poster

Hello @all,

Is there currently the possibility to integrate the datalayer as an interactive tree in an own developed webapp?

Like the ctrlX web interface, Device Bridge or even Node-Red?

--> see screenshot

 

Until now I only used the Datalayer Rest API to query the single nodes. Unfortunately this is not very comfortable.

Similar to DeviceBridge, I would like to browse in the datalayer tree and select individual nodes.

 

I would be glad about a suggestion.

Thanks!

2 REPLIES 2

Sgilk
Frequent Contributor

Take a look at the following example: Python Datalayer Client Browse

You could modify this example to display the top level datalayer tree by default. Each time a new node is selected in the Web UI, the browse node is updated in the Python client and the discovered nodes are returned to the UI to be displayed. 

CodeShepherd
Community Moderator
Community Moderator

There is a function to show all known nodes beneath a given path. See BROWSE in topic "Using the REST API of ctrlX CORE [DOCU] - [VIDEO]". You can use this to create an own visualisation/frontend.

 

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist