How to open Tridion Select Item window from Angular 4?

Question

I have an Angular 4 application that is loaded inside a Publication tab. From that application, I need to open the Select Item window to get the selected item.

Until now I used the classic window.open(url, ...), but I don't know how to get the selected item.

The url that I use is /WebUI/Editors/CME/Views/Popups/ItemSelect/ItemSelectDialog.aspx

Answer 1

var popup = $popupManager.createExternalContentPopup($cme.Popups.TREE_ITEM_SELECT.URL, $cme.Popups.TREE_ITEM_SELECT.FEATURES,
{
    rootId: "tcm:0-2-1",
    itemTypes: [$const.ItemType.CATEGORY, $const.ItemType.KEYWORD],
    allowRootSelection: true
});
popup.open();

Also Register Namespace :

Dependencies.Add("Tridion.Web.UI.Editors.CME");
Dependencies.Add("Tridion.Web.UI.Editors.CME.commands");
Dependencies.Add("SDL.Web.UI.Editors.CME.CommandSets.All");
Dependencies.Add("SDL.Web.UI.Core.Controls.fieldbuilder");

Hope it will work for you...

Answer 2

Please try below example code for open tridion select item.

/*
* Handles the Component Browse selection and opens the CME item selector dialog
*/
SDLWEB.RTFExtensions.Popups.InsertComponent.prototype._onComponentBrowseClicked = function (event) {

var p = this.properties;
var c = p.controls;

if (p.ItemPopup && p.ItemPopup.isOpen()) {
    p.ItemPopup.focus();
}
else {
    // Show only the components from the current publication
    var filter = {
        conditions:
        {
            ItemTypes: [$const.ItemType.COMPONENT],
            ShowNewItems: true
        }
    };

    var rootId = (window.dialogArguments && window.dialogArguments.publicationId) ? window.dialogArguments.publicationId : "";
    var self = this;
    // Launch the item selector dialog
    p.ItemPopup = $popupManager.create(
        $cme.Popups.ITEM_SELECT.URL.format(rootId),
        $cme.Popups.ITEM_SELECT.FEATURES, { filter: filter });
    // close popup during cancel
    function InsertComponent$_onComponentBrowseClicked$onPopupClosed(event) {
        if (p.ItemPopup) {
            p.ItemPopup.dispose();
            p.ItemPopup = null;
        }
    };
    // get the selected component and grab its title
    $evt.addEventHandler(p.ItemPopup, "insert",
        function InsertComponent$_onComponentBrowseClicked$onPopupSubmitted(event) {
            var items = event.data.items;

            if (items) {
                var itemId, itemName;
                itemId = items[0];
                if (!String.isNullOrEmpty(itemId)) {
                    var item = $models.getItem(itemId);                    
                    if (item) {
                        itemName = item.getStaticTitle();

                        self._onComponentSelected(itemId, itemName, "");                           
                    }                     
                }
            }
            InsertComponent$_onComponentBrowseClicked$onPopupClosed();
        });

    p.ItemPopup.open();
}

};