Expanding a SAPUI5 class by incorporating a pre-determined header

In my attempt to expand a class using SAPUI5 methodology, I created a basic version to test its functionality. However, the predetermined title is not displaying in this particular example:

var app;

sap.m.Page.extend("MyPage", {
  title: "hi",
  renderer: {}
});

app = new sap.m.App({
  pages: new MyPage({
    //title: "Hey there!"
  })
});

app.placeAt("content");

An illustration of this issue can be found here:

http://jsfiddle.net/DerZyklop/76y4m6f0/4/

Answer №1

It seems like there was a mistake in your definition. According to the guidelines outlined in this documentation, it is recommended to specify a default value for control metadata in the following manner:

metadata: {
  properties: {
    "title": {
       type: "string",
       group: "Data",
       defaultValue: "Hi"
    }
  }
},

Answer №2

For defining a property with a default value, you can use the following method:

sap.m.Page.extend("MyPage", {
  metadata : {
    properties : {
      title : {type : "string", group : "Data", defaultValue : "hi"}
    }
  },
  renderer: {}
});

However, in the page control, the title property is set using its "setTitle" method rather than in the renderer. This means that when a default value is specified, the "setTitle" property is not called. To work around this issue, you can manually call it during initialization.

sap.m.Page.extend("MyPage", {
    init: function () {
        this.setTitle("hi");
    },
    renderer: {}
});

Would you consider this to be a suitable solution for your problem?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing coordinate formatting in JavaScript [Node.js]

I'm looking to tweak the JSON output into this specific format: [ 50.87758, 5.78092 ], [ 52.87758, 5.48091 ] and so on. Currently, the output looks like this: [ { lat: 53.1799, lon: 6.98565 }, { lat: 52.02554, lon: 5.82181 }, { lat: 51.87335, l ...

What is the process for transferring selections between two select elements in aurelia?

I am attempting to transfer certain choices from select1 to select2 when a button is clicked. Below is my HTML code: <p> <select id="select1" size="10" style="width: 25%" multiple> <option value="purple">Purple</option> &l ...

What is the best way to extract the src attribute from an image tag nested within innerHtml?

In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...

Navigating through embedded arrays in Angular

JSON Object const users = [{ "name":"Mark", "age":30, "isActive" : true, "cars":{ Owned : ["Ford", "BMW", "Fiat"], Rented : ["Ford", "BMW", "Fiat" ...

The command '.' is unable to be executed as an internal or external command, executable program, or batch file when using npm start -- -e=stag -c=it

After executing the command shown below npm start -- -e=stag -c=it An error is generated: ./scripts/start.js -e=stag -c=it '.' is not recognized as an internal or external command, operable program or batch file. What can be done to resolve th ...

What is the significance of using the "why" in the href property within the

I need help understanding why the plus "+" is used before and after myUrl in the function .not. Even though it works fine with or without the +, I am curious about why it was included in the code snippet. <script type="text/javascript"> $(documen ...

Simulated alternate identities for UI Router

I am managing a group of pages/URLs that share a common parent state/template: /orders/list /orders/create /products/list /products/create Currently, I have two dummy states/routes (/products and /orders) that serve as parent states for the other substat ...

Is there a way to link Dom $(this) from a different function?

Could you please review this code and advise on how I can bind $(this) in an external function within a DOM event? $(".adder").on("click", function(){ updateText(); }); function updateText(){ $(this).next(".mapper").html("Got You!"); } <scrip ...

Having trouble getting the Html onload function to work in Google Sheets App Script?

I'm working with google sheets and I'm in the process of creating a document to track employees who are currently out of the office. I have added a menu option that allows me to remove employee data, which triggers the opening of a sidebar contai ...

loop through an array and use splice to select items and modify the array

My current issue involves working with a pixabay array. Although I successfully retrieved the data from my array, it contains 20 random pictures when I only need 3 to be displayed on my website. I attempted to use a slice array for this purpose, but unfor ...

Modifying the selected color of DropDownMenu List items

Hey there! I'm currently trying to modify the color of a material-ui element that is selected, but I'm having trouble finding any resources on how to accomplish this. My goal is to switch this pinkish shade to a more soothing blue hue. https://i ...

Optimal approach for incorporating controller As with UI Router

Currently working on a small search application using AngularJS and Elasticsearch. I am in the process of transitioning the app from using $scope to controller As syntax. I have implemented UI Router for managing routes/states. I have been attempting to us ...

Creating a buffered transformation stream in practice

In my current project, I am exploring the use of the latest Node.js streams API to create a stream that buffers a specific amount of data. This buffer should be automatically flushed when the stream is piped to another stream or when it emits `readable` ev ...

A guide on sending arguments to a react function component from a JSX component via onClick event handling

Below is a brief excerpt from my extensive code: import React from "react"; const Home = () => { return ( imgFilter.map((imgs) => { return ( < Col sm = "3" xs = "12" key ...

Looking for assistance with updating a JavaScript Object Array and embedding it into a function

Below is the code snippet I am working with: $("#map4").gMap({ markers: [ { address: "Tettnang, Germany", html: "The place I live" }, { address: "Langenargen, German ...

Angular reactive form encountered an issue with an incorrect date being passed

Currently, I am utilizing the PrimeNg calendar module to select a date. Here is the code snippet: <p-calendar formControlName="valid_till" [dateFormat]="'mm/dd/yy'"></p-calendar> Upon selecting a date like 31st J ...

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

Loading javascript libraries that are contained within an appended SVG document

I am currently working on developing a browser-based SVG rasterizer. The unique aspect of this project is that the SVG files may contain JavaScript code that directly impacts the output, such as randomly changing element colors, and utilizes external libra ...

How can we dynamically render a component in React using an object?

Hey everyone, I'm facing an issue. I would like to render a list that includes a title and an icon, and I want to do it dynamically using the map method. Here is the object from the backend API (there are more than 2 :D) // icons are Material UI Ic ...

Strategies for avoiding the issue of multiple clicks on a like button while also displaying an accurate likes

My latest project involves creating a Like button component that features a button and a likes counter text field. The challenge I am facing is that each time I click on the button, it toggles between like and dislike states. However, if I rapidly press ...