Developing SAPUI5: Construct a GenericTile featuring a centrally positioned icon

I'm having trouble creating a custom tile in SAP that inherits from sap.suite.ui.commons.GenericTile and only displays an icon centered in the middle of the tile. The standard aggregations and properties are causing issues as they position the icon on the left lower side.

I attempted the following code but it did not work:

$.sap.declare("myAddTile");

sap.suite.ui.commons.GenericTile.extend("myAddTile", {

init: function() {
    // do something for initialization...
    sap.suite.ui.commons.GenericTile.prototype.init.call(this);
},
renderer: function(oRm, oControl) {
    var oPlusIcon = new sap.ui.core.Icon({
        src: 'sap-icon://sys-add'
    }).placeAt(oControl);
    sap.suite.ui.commons.GenericTileRenderer.render(oRm, oControl);
}
});

The resulting tile appears empty...

htmlcsstilesapui5

Answer №1

After experimenting with the renderer, I developed the following solution:

    rm.write("<div");
    rm.addClass("myAddTileIcon");
    rm.addClass(oControl.getSize());
    rm.writeClasses();
    rm.writeAttribute("id", oControl.getId() + "-icon");
    rm.write(">");
    rm.renderControl(new sap.ui.core.Icon({
        src: 'sap-icon://sys-add',
        size: "5rem"
    }));
    rm.write("</div>");

To ensure proper alignment of the icon, I added the following CSS style rules:

.myAddTileIcon .sapUiIcon {
  font-family: SAP-icons;
  font-size: 5rem;
  line-height: inherit;
  cursor: default;
  text-align: center;
  display: block;
  padding-top: 20%;
  vertical-align: middle;
  color: grey;
}

If anyone has suggestions on a more elegant approach to this problem, please feel free to share.

Cheers

   

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

Vuetify vueJS dialog with elevated design

Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...

htmlcssvue.jssassvuetify.js

Tips for transferring a jQuery array to PHP

I am encountering an issue when trying to send a jQuery array to PHP. Initially, I have one form in HTML and upon clicking 'add', I end up with two forms. Afterwards, I input data into the form which is then stored in a jQuery array. However, I a ...

javascriptphpjqueryhtmlajax

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

access denied on image links

While developing a web app with Angular5, I encountered an issue regarding retrieving image URLs from the 4chan API. Each post in my database contains an image URL, however, when I try to access it through my app, I receive a 403 forbidden error in the con ...

htmlangularimageurlhttp-status-code-403

Maintaining nth-child(odd) following filtering using jQuery

I am using a jQuery script to filter a table with multiple entries on this site. The filtering works well, but the issue arises when it comes to maintaining the correct tr:nth-child(odd) color that I have specified in my CSS. After filtering, the original ...

jqueryhtmlcss

Grab the code snippet from JSFiddle

I apologize for the seemingly simple question, but I have been struggling with it. I tried looking at similar questions, but I couldn't find a solution. Despite copying the code from http://jsfiddle.net/sB49B/21/, I can't seem to get it to work ...

javascripthtmlcssjsfiddle

Managing HTML5 Video in a slider

I've designed a unique video slider that cycles through 4 videos. Each video has a custom play button and additional overlay content. Once the video starts playing, the overlay content and play button fade out to reveal the default video controls. The ...

javascriptjqueryhtmlvideohtml5-video

What is the best way to add the ".html" suffix to pages in nuxt.js?

Is it possible to add the ".html" extension to a page address? For instance, changing "test_page" to "test_page.html" ...

htmlvue.jsnuxt.js

Uncover the hidden message in a string encoded for JavaScript

This encoded HTML code is intended for use in a JavaScript function <div class=\"ProductDetail\"><div style=\"width:780px\">\r\n\t<div class=\"baslik\" style=\"margin: 0px; padding: 5px 10px ...

javascriptc#htmlencodingdecode

When using the .after() method to add jQuery elements, keep in mind that they will not trigger any

Here is the snippet of code provided: <s:file name="upload" id="upload"></s:file> $('input[id^="upload"]').change(function(){ alert("aa"); $(this).after('<input type="file" name="upload_3" id="upload_3"/> ...

javascriptjqueryhtmljquery-after

tips on sending multiple data- id in a modal window

Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...

javascriptphpjqueryhtmlajax

Show the input from one HTML form on a different HTML form

Seeking guidance on utilizing local storage in HTML5. How can I extract information from one form and present it on another HTML form page? Picture this: two forms at play here. Upon populating form 1 and hitting the submit button, the content should be v ...

javascripthtml

"Utilizing a custom CSS style for a half heart rating system

I am currently working on implementing a rating system using the font-awesome fa-heart class. While I have successfully colored the full heart, I am facing difficulty in filling only the first half of the heart in red. Despite my research efforts, all solu ...

htmlcss

Modifying the color of the active column

In an attempt to remove the color from the column border following a click on the image, I am struggling to locate the specific code segment that needs adjustment. I have scrolled through the entire code and experimented with color changes without succes ...

htmlcss

Learning the art of Javascript programming within the HTML5 realm

Seeking assistance with a JavaScript project - I'm attempting to develop a Bubble Buster game reminiscent of pong, but with multiple bubbles. The goal is to have falling bubbles on screen (roughly 100 in total) in various colors dropping from random l ...

javascripthtml

Display the modal in Angular 8 only after receiving the response from submitting the form

I am encountering an issue where a pop-up is being displayed immediately upon clicking the submit button in Angular 8, before receiving a response. I would like the modal to only appear after obtaining the response. Can someone assist me with achieving thi ...

javascripthtmlangulartypescriptbootstrap-modal

The CSS code is effective on one page but fails to render on the other

I am in the process of creating a website for my jewelry business and it's my first time doing so. I'm facing an issue where the CSS styles are being applied to one page but not to the other, even though both HTML files have the same code linking ...

htmlcssbrowser

Ways to verify if the CSS background-color is set to white?

I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } });​​​​ that will execute on click of a specific cla ...

javascriptjquerycsscolors

Tips for adding animation to the div instead of the content

I have implemented a hover animation to animate the div, but unfortunately, when I added the animation to #i :hover {}, it ended up animating the words only. Moreover, the cursor transforms into a pointer solely when hovering over the words instead of the ...

htmlcsscss-animations

How can I remove specific items from a session array when they are selected?

I am seeking a solution that will allow me to remove a specific item from an array when that item is clicked. For example, if I click on "Two", it should disappear. See a demonstration here: CODE: <form method="post"> <input type="text" i ...

phphtmlarrayssessionunset