1

I am opening a dialog after clicking a button and filling some info into it. When I open the dialog once again it displays the error:

 Error: adding element with duplicate id '__xmlview1--__item0'

Below is the code : (Edited : saving the create dialog instance everytime the dialog is created)

        onAddMovie: function() {
        var view = this.getView();
        var createDialog = view.byId("CreateDialog");

        var oDummyController = {
            // This is when I clicked the Submit button in dialog
            submitDialog: function() {
            view.byId("panel").setVisible(true);

            user = view.byId("movie_name").getValue();
            var label = view.byId("movieName");
            label.setText(user);

            screenDate=view.byId("screeningDate").getValue();
            var date = view.byId("__date");
            var dateObject = new Date(screenDate);
            var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "MMM dd,YYYY" }); 
            var dateFormatted = dateFormat.format(dateObject);
            date.setText(dateFormatted);


            rating=view.byId("langRating");
            var radioRating= view.byId("movieRating").getSelectedButton().getText();
            if(radioRating == "Universal")
           { radioRating='(U)'; }
            else if(radioRating == "Adult")
            {
                radioRating='(A)';
            }
            else
            {
                    radioRating='(U/A)';
            }


            rating=view.byId("langRating");
            rating.setText(radioRating);

                MessageToast.show(user);
                createDialog.close();
            },
            closeDialog: function() {
                createDialog.close();
            }
        };
        // This is when the dialog event is fired, things are fine here
        if (!createDialog) {
            createDialog = sap.ui.xmlfragment(view.getId(), "Admin.view.Dialog", oDummyController);
        }

          if (this._createDialog) {
       this._createDialog = sap.ui.xmlfragment(view.getId(), 
       "Admin.view.Dialog", oDummyController);
      }
        view.addDependent(createDialog);
        createDialog.open();
        if (!createDialog.isOpen()) {
            //do sth
        }
    }

fragment :

         <core:FragmentDefinition  xmlns="sap.m" xmlns:core="sap.ui.core" 
           xmlns:l="sap.ui.layout">

                <Dialog  title="Input Movie Details" width="100%" 
          class="sapuiMediumMargin" confirm="handleClose" 
             close="handleClose">
                    <l:VerticalLayout class="sapUiContentPadding" width="100%">
                    <l:content>
                        <Input width="100%" placeholder="Movie Name" id="movie_name"/>
                        <HBox alignItems="Center" renderType="Bare">
                            <Label text="Year of Release" width="50%"/>
                            <ActionSelect selectedItem="Element sap.ui.core.ListItem#__item0" selectedKey="item1" class="sapUiLargeMarginBegin" selectedItemId="__item0" id="yearOfRelease" width="50%">
                                <items>
                                    <core:ListItem text="2017" key="item1" id="__item0"/>
                                    <core:ListItem text="2016" key="item2" id="__item1"/>
                                    <core:ListItem text="2015" key="item3" id="__item2"/></items>
                            </ActionSelect>
                        </HBox>
                        <HBox alignItems="Center" renderType="Bare">
                            <Label text="Date of Screening" width="50%"/>
                            <DatePicker class="sapUiLargeMarginBegin" width="50%" id="screeningDate"/>
                        </HBox>
                        <HBox alignItems="Center">
                            <Label text="Movie Rating"/>
                            <RadioButtonGroup width="100%" columns="3" selectedIndex="-1" id="movieRating">
                                <buttons>
                                    <RadioButton  groupName="__group0" text="Universal" id="__button0"/>
                                    <RadioButton groupName="__group0" text="Adult" id="__button1"/>
                                    <RadioButton groupName="__group0" text="U/A" id="__button2"/></buttons>
                            </RadioButtonGroup>
                        </HBox>
                                <HBox alignItems="Center" width="100%" renderType="Bare">
                            <Label text="Enable Booking" width="70%"/>
                        <CheckBox id="enableBooking" width="30%" textDirection="LTR"/>
                    </HBox>
                        <FlexBox alignItems="End" alignContent="Center" justifyContent="End" class="sapUiTinyMarginTop">


                            <SegmentedButton selectedButton="__button3" id="__button21">
                                    <buttons>
                                        <Button text="Submit" id="__submit" press="submitDialog"/>
                                        <Button text="Cancel" id="__button41" press="closeDialog"/></buttons>
                                </SegmentedButton>
                                    </FlexBox>
                        </l:content>
                    </l:VerticalLayout>
                </Dialog>

            </core:FragmentDefinition>

Please help as I am new to Javascript and SAPUI5

1 Answer 1

3

You seem to be creating the same dialog over and over again which causes the duplicate ID error.

Check if var createDialog = view.byId("CreateDialog"); really returns your former dialog.

Dialog Creation

To make sure you could just save it in an instance variable:

if (this._createDialog) {
  this._createDialog = sap.ui.xmlfragment(view.getId(), "Admin.view.Dialog", oDummyController);
}

Another solution would be to re-create it every time and keep destroying it after every close:

<Dialog afterClose="onAfterClose">

onAfterClose: function(oEv) {
  oEv.getSoruce().destroy();
}

This is what I refer to as self-destruction :D

ID Conflicts

When creating your fragment with the views id prefix:

sap.ui.xmlfragment(this.getView().getId(), "my.Fragment", this);

You have to make sure to not have any ID conflicts between controls of your view and your fragment. Ids like your __item0 are similar to auto-generated UI5 ids (__[type][count]). Omitting the ui5-internal prefix __ should be sufficient in your example fragment.

If you have to use ids extensively as you do (you don't have to in most cases) you are probably better of using a separate ID for your fragment

sap.ui.xmlfragment("fragment", "my.Fragment", this);

and query with

sap.ui.core.Fragment.byId("fragment", "controlId");

BR Chris

8
  • Destroying dialogs everytime leads to ugly unwanted scrolling. Reusing a dialog is the way to go.
    – Marc
    Nov 20, 2017 at 19:12
  • well, it depends 😊
    – cschuff
    Nov 20, 2017 at 20:04
  • As usual ;) But still, destroying has ugly unwanted side effects.
    – Marc
    Nov 20, 2017 at 20:15
  • First method not working and I don't want to destroy the dialog.
    – Swappy
    Nov 21, 2017 at 12:28
  • 1
    @Swappy You are creating the dialog twice in the code you posted.
    – cschuff
    Nov 23, 2017 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.