how to add a button or dialog input to UI Screen SAPUI5

[Former Member]

I have the following BSP that is Javascript that is extending a UI screen in SRM.

I would like to add another button to the screen or create a dialog input once the current button is selected. I am new to sapui5 and do not use javascript at all as I am normally an ABAP developer.

I am looking for guidance with the current code on how to achieve adding another button or popup dialog box.

I have tried adding a dialog to the current code but I get the error "Uncaught ReferenceError: Dialog is not defined" in the chrome developer tools.

ASSETCREATE = function() {

  // Declare instance variable if required

};

ASSETCREATE.prototype.CUSTOM_POST_EXIT = function(methodName, view, controller,methodSignature, dialog) {

  // Call the below logic only in Account Assignment Details Screen

  if (view == 'accountLineDetails') {

// disable the Account Assignment Category List Box

       sap.ui.getCore().byId('CategoryListDetAS').setProperty('enabled',false);

// read the form data

 this.accounting = sap.ui.getCore().byId("accAssignment").getController().accounting;

 var oFormModel = this.accounting.callMethod("_getFormModel");

 var oModel = oFormModel.oData ;



    // Add the "Create Asset" button in the footer layout

    jQuery.sap.require("sap.ui.commons.MessageBox");

    var oBtnLayout  = sap.ui.getCore().byId(sap.ui.getCore().byId('saveBtn').getParent().getId());

    var oAssetBtn   = sap.ui.getCore().byId('assetBtn-Custom');

    var oAssetBtn2  = sap.ui.getCore().byId('assetBtn-Custom2');

    // Add the "Create Multiple Asset" button in the footer layout

    jQuery.sap.require("sap.ui.commons.MessageBox");

    //var oBtnLayout2 = sap.ui.getCore().byId(sap.ui.getCore().byId('saveBtn2').getParent().getId());





    // run abap code to get the language of the user from backend

<%

  data: lv_langu type sy-langu.

  lv_langu = sy-langu.

%>

    var lv_language = '<%= lv_langu.%>' ;

    var lv_text = "";

    var lv_multiple_txt = "";

    if( lv_language == "F" ){

       lv_text = "Créer Immo";

       lv_multiple_txt = "Créer Plusieurs Actifs";

      }

      else{

       lv_text = "Create Asset";

       lv_multiple_txt = "Create Multiple Assets";

      }



      if (!oAssetBtn2) {

        var oAssetBtn2 = new sap.ui.commons.Button({

        id   : "assetBtn-Custom2",

        text : lv_multiple_txt,

        tooltip : Appcc.getText("Creates many Asset")

      });

      }



    if (!oAssetBtn) {

        var oAssetBtn = new sap.ui.commons.Button({

        id   : "assetBtn-Custom",

        text : lv_text,

        tooltip : Appcc.getText("Creates an Asset")

      });



   // Event handling logic - Asset creation

      oAssetBtn.attachPress(

              function() {

                 

                   // prepare the json data for post call

                var json = {

                              AccCat         : oModel.ACC_CAT,

                              AccNo          : oModel.ACC_NO,

                              AssetNo        : oModel.ASSET_NO,

                              BusArea        : $("#businessAreaSearchAS").val(), //oModel.BUS_AREA,

                              CoArea         : $("#controlAreaTFAS").val(), //oModel.CO_AREA,

                              CostCtr        : $("#costCenterSearchAS").val(), //oModel.COST_CTR,

                              DistValue      : oModel.DIST_VALUE,

                              GLAcct         : $("#glAccountSearchAS").val(), //oModel.G_L_ACCT,

                              SubNumber      : $("#subNumberAS").val(), //oModel.SUB_NUMBER,

                              WbsElemE       : $("#wbsSearchAS").val(), //oModel.WBS_ELEM_E,

                              Zzcddeparea    : oModel.ZZCDDEPAREA,

                              Zzcddepdate    : oModel.ZZCDDEPDATE,

                              Zzcddescrip    : $("#accountLineDetails_ASSETDESCRIPTION").val(), //oModel.ZZCDDESCRIP,

                              Zzcdloc        : $("#accountLineDetails_LOCATION-input").val(), //oModel.ZZCDLOC,

                              Zzcdmanu       : $("#accountLineDetails_MANUFACTURER").val(), //oModel.ZZCDMANU,

                              Zzcdmodel      : $("#accountLineDetails_MODEL").val(), //oModel.ZZCDMODEL,

                              Zzcdplant      : $("#accountLineDetails_PLANT-input").val(), //oModel.ZZCDPLANT,

                              Zzcdroomnum    : $("#accountLineDetails_ROOMNUM").val(), //oModel.ZZCDROOMNUM,

                              Zzcdsuper      : $("#accountLineDetails_SUPER").val(), //oModel.ZZCDSUPER,

                              Zzcdassetclass : $("#accountLineDetails_ASSETCLASS-input").val(), //oModel.ZZCDASSETCLASS

                            }



                // prepare data in json format for POST call

                var sServiceUrl = "/sap/opu/odata/sap/ZCD_ASSET_SRV_01/";

                this.oFormODataModel = new sap.ui.model.odata.ODataModel(

                                           sServiceUrl, {

                                          json : true,

                                          loadMetadataAsync : false

                                        });

                // perform OData call for Asset creation

                this.oFormODataModel.create("/AssetSet",

                                            json,

                        {

                          success : function(aData,oResponse) {

                            // display success message

                            var successMsg = 'Asset'

                                + ' '

                                + aData.AssetNo

                                + ' '

                                + 'has been created';

                            sap.ui.commons.MessageBox.show(

                                    successMsg,

                                    sap.ui.commons.MessageBox.Icon.SUCCESS);

                            // update the Asset number field & disable the Create Asset button

                            var oAssetTextField = sap.ui.getCore().byId('assetSearchAS');

                            oAssetTextField.setValue(aData.AssetNo);

                            oAssetTextField.setEditable(false);

                            sap.ui.getCore().byId('assetBtn-Custom').setProperty('enabled',false);

                          },

                          error : function(oError) {

                            // throw error message

                            var errorMessage = JSON.parse(oError.response.body).error.message.value;

                            sap.ui.commons.MessageBox.show(

                                    errorMessage,

                                    sap.ui.commons.MessageBox.Icon.ERROR);

                          }

                        });

              }, controller);

      oBtnLayout.addContent(oAssetBtn);

// Disable Asset creation when the Asset Number is already filled

     if(oModel.ASSET_NO && oModel.ACC_CAT == 'AS'){

       sap.ui.getCore().byId('assetBtn-Custom').setProperty('enabled',false);

       sap.ui.getCore().byId('percentageField').setProperty('enabled',false);

       sap.ui.getCore().byId('assetSearchAS').setProperty('enabled',false);

       sap.ui.getCore().byId('costCenterSearchAS').setProperty('enabled',false);

       sap.ui.getCore().byId('percentageField').setProperty('enabled',false);

       sap.ui.getCore().byId('subNumberAS').setProperty('enabled',false);

       sap.ui.getCore().byId('wbsSearchAS').setProperty('enabled',false);

       sap.ui.getCore().byId('glAccountSearchAS').setProperty('enabled',false);

       sap.ui.getCore().byId('businessAreaSearchAS').setProperty('enabled',false);

       sap.ui.getCore().byId('controlAreaTFAS').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_ASSETCLASS').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_ASSETDESCRIPTION').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_PLANT').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_LOCATION').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_ROOMNUM').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_SUPER').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_MANUFACTURER').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_MODEL').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_DEPDATE').setProperty('enabled',false);

     }

// Enable the custom fields only on Account Assignment Category is Asset

     if(oModel.ACC_CAT != 'AS'){

// Disable the Asset Create button and Remove everything below Asset Class

       sap.ui.getCore().byId('assetBtn-Custom').setProperty('enabled',false);

       sap.ui.getCore().byId('accountLineDetails_ASSETCLASS').getParent().getParent().setVisible(false);

      }

  }

  }

};

[Former Member · Accepted solution]

Hi All,

I found the issue, I was missing the statement to add content to the UI.

oBtnLayout2.addContent(oAssetBtn2);

I add that to the code and now the button is showing up.

[Former Member]

I have modified the code to try and 'force' the button onto the UI, however, I am now getting the error

ASSETCREATE = function() {
  // Declare instance variable if required
   var oAssetBtn2  = sap.ui.getCore().byId('assetBtn-Custom2');
};

ASSETCREATE.prototype.CUSTOM_POST_EXIT = function(methodName, view, controller,methodSignature, dialog) {
  // Call the below logic only in Account Assignment Details Screen
  if (view == 'accountLineDetails') {
// disable the Account Assignment Category List Box
       sap.ui.getCore().byId('CategoryListDetAS').setProperty('enabled',false);
// read the form data
 this.accounting = sap.ui.getCore().byId("accAssignment").getController().accounting;
 var oFormModel = this.accounting.callMethod("_getFormModel");
 var oModel = oFormModel.oData ;
    // Add the "Create Asset" button in the footer layout
    jQuery.sap.require("sap.ui.commons.MessageBox");
    var oBtnLayout  = sap.ui.getCore().byId(sap.ui.getCore().byId('saveBtn').getParent().getId());
    var oAssetBtn   = sap.ui.getCore().byId('assetBtn-Custom');


    // Add the "Create Multiple Asset" button in the footer layout
    jQuery.sap.require("sap.ui.commons.MessageBox");
    //var oBtnLayout2 = sap.ui.getCore().byId(sap.ui.getCore().byId('cancelBtn').getParent().getId());
    var oAssetBtn2  = sap.ui.getCore().byId('assetBtn-Custom2');
    // run abap code to get the language of the user from backend
<%
  data: lv_langu type sy-langu.
  lv_langu = sy-langu.
%>
    var lv_language = '<%= lv_langu.%>' ;
    var lv_text = "";
    var lv_multiple_txt = "";
    if( lv_language == "F" ){
       lv_text = "Créer Immo";
       lv_multiple_txt = "Créer Plusieurs Actifs";
      }
      else{
       lv_text = "Create Asset";
       lv_multiple_txt = "Create Multiple Assets";
      }
        var oAssetBtn2 = new sap.ui.commons.Button({
        id   : "assetBtn-Custom2",
        text : lv_multiple_txt,
        tooltip : Appcc.getText("Create many Assets")
    });

    if (!oAssetBtn) {
        var oAssetBtn = new sap.ui.commons.Button({
        id   : "assetBtn-Custom",
        text : lv_text,
        tooltip : Appcc.getText("Creates an Asset")
      });

custom code error: Error: adding element with duplicate id 'assetBtn-Custom2' Error: Error: adding element with duplicate id 'assetBtn-Custom2'

I am following the same steps that were used to add the button "Create Asset", does the ID have to exist somewhere in SAP as a MIME object or something?

here is a visual of the error in chrome

https://i.stack.imgur.com/qrsiG.jpg