Рубрика: Blog

Start with components open sap ui5

first steps, sap ui5

So, first steps!

1 Go to https://openui5.org/releases/

and

2 load the last openui5 release!

 

3 after that just use it:

<!DOCTYPE html>  
<html>
   <head>  
      <meta http-equiv='X-UA-Compatible' content='IE=edge' />  
      <title>Hello World</title>  
  
      <script id='sap-ui-bootstrap' 
           src='[INSTALLATION LOCATION]/resources/sap-ui-core.js'  
           data-sap-ui-theme='sap_belize'  
           data-sap-ui-libs='sap.m'></script>   
  
      <script>  
         var btn = new sap.m.Button({  
            text:'Hello World',  
            press:function(){alert('Hello!');}  
         });  
         btn.placeAt('content');  
      </script>

   </head>
   <body id='content' class='sapUiBody'>
   </body>
</html>

So, and it didn’t work!

 

You can solved it 2 ways:

1 use  <script src=»https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js»>

2 You need use web server!

for chrome use Web Server for Chrome 

and that you need choose folder with you app and release!

 

So, now it will work!

SetHours for Date in sap ui5, how do if date reduce -1 day, or you filter not working

Blog, Odata, What???

So,

First situation when in the backend server you saw rhat date less on -1 day!
What happend? It odata sevices do crayzy date!
What you can do?

just try use that:
var conv = function(conv_date){
var dateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({pattern : "yyyy-MM-ddTKK:mm:ss" });
var lv_date_val = new Date(conv_date);
var dateStr = dateFormat.format(lv_date_val);
return dateStr;
}

in you data request use
odata.validdate = conv(odata.validdate);

second situation, when you use filter,
and you neded use setHours on the date.
How you can understund how match hours set?

Try use that
var sHours = new Date().getHours() - new Date().getUTCHours();

and
var value = new Date();
value.setHours(sHours);

FioriLaunchpad.html

sap ui5, Shell

Where you can find it:
use se80, bsp application /UI2/USHELL

add button to user interface:

zFioriRenderer.getRenderer = function(){
zFioriRenderer.renderer = sap.ushell.Container.getRenderer("fiori2");
if(!zFioriRenderer.renderer){
setTimeout(zFioriRenderer.getRenderer, 1000);
}else{
zFioriRenderer.helpBtn.button = new sap.ushell.ui.shell.ShellHeadItem( {
icon: "sap-icon://sys-help",
tooltip: "Вызов справки",
press: zFioriRenderer.helpBtn.helpFunc
});
jQuery.sap.getObject('sap.ushell.renderers.fiori2.RendererExtensions').addHeaderEndItem(zFioriRenderer.helpBtn.button);

zFioriRenderer.helpBtn.button = zFioriRenderer.renderer.addActionButton("sap.m.Button", { id: "favBtn",
text: "Фавориты",
tooltip: "Добавить на главную",
icon: "sap-icon://add-favorite",
press: zFioriRenderer.favBtn.favFunc }, true, false, ["app","home"]);
}
};

zFioriRenderer.getRenderer();

more information about add button you can find on api.

Shell toolbar Icon

Shell

If you want add button to shell, you cross with few interesting things:

If you you want use right toolbar It support only 3 button!

 

So, What???

Yes!

okm if you want do it use jquery!

for exapmle:


onAfterRendering: function(){
debugger;
try{
var pl = document.getElementById("shell-header-hdr-end");
$(pl).append( "Test" );
var b = new sap.m.Button();
}
catch (err){
debugger;
}
},


 

 

extend method for component sapui5

Fiori, sap ui5

Hello,

I needed extend sap ui5 component, and use my method after rendering,

How you can use it?

For example

var form = new sap.ui….

form.addEventDelegate({
«onAfterRendering»: function() {
if (typeof(Top) !== ‘undefined’) {
oPage.scrollTo(0, Top);
}
}
}, this);

 

that really perfect work!

sap.ui.model.odata.v2.ODataModel

Odata

//Create model

var url = ""; //your services url
var OdataInfo = new sap.ui.model.odata.v2.ODataModel(url, true);

//Create success and error function
var suc_func = function(obj){
debugger;
}
var er_func = function(obj){
debugger;
}

//Create filters
var filt;


sap.ui.define(['sap/ui/model/Filter',
'sap/ui/model/FilterOperator'],
function(Filter, FilterOperator) {
filt = new Filter({
path: "areaId",
operator: FilterOperator.EQ,
value1: '0000000116'
});
});

//Made Request
var rr = OdataInfo.read("/MY_INFO",
{
filters: [filt],
success: suc_func}
);

 

 

Sap Abap!!!

MY_INFO_GET_ENTITYSET.

    data: lv_filter_options type /iwbep/t_mgw_select_option .

    lv_filter_options = io_tech_request_context->get_filter( )->get_filter_select_options( ).

 

 

if you want create Entity, this we have one secrets ) Thanks for SAP for use our brain to open code

var url = «********/ZSEM_SRV/»;

var OdataInfo = new sap.ui.model.odata.v2.ODataModel( {serviceUrl:url} );

//Create success and error function

var suc_func = function(obj) { debugger; };

var er_func = function(obj) { debugger; };

var oData = { IdSource: «23123», Source: «fdffasdffsadfasdfasdfsadfsdfsdfsfddfsdfsdf», Title: «rrr», Type:»sdf» };

var sPath = ‘/ZSEM_SOURCESet’;

OdataInfo.create(sPath, oData, {success: suc_func, error: er_func});

and now in your class you must use structure for get keys

    try .
        data ls_s type html_sourc.   //<<you must set this or you could have a dump!!!

        io_data_provider->read_entry_data(
          importing
           es_data    = ls_s
        ).
      catch cx_root into data(lo_cx).
        data(lv_t) = lo_cx->get_text( ).
    endtry.

Add custom button on header shell sap ui5

Hi guys I tell you how add custom button on header shell!

So I hope it will be help for you!


setfavbutton: function() {
/**
* ADD Chat Support Button
*/
function onSupportHeaderItemPress() {
var button = new sap.ushell.ui.footerbar.AddBookmarkButton();

var info = »;
var title = »;
var subtitle = »;
var icon = »;

if (icon === «») {
//set default icon
icon = «sap-icon://home»;
}
var button = new sap.ushell.ui.footerbar.AddBookmarkButton();
button.setAppData({
title: title, // default: «»
subtitle: subtitle, // default: «»
info: info, // default: «»
icon: icon // default: undefined
});
button.firePress();
};
// add button to the right side of the shellbar
try {

if (typeof(window.favbutton) === «undefined») {
var oRendererExtensions = jQuery.sap.getObject(‘sap.ushell.renderers.fiori2.RendererExtensions’);
window.favbutton = new sap.ushell.ui.shell.ShellHeadItem(‘supportChatBtn’, {
icon: sap.ui.core.IconPool.getIconURI(‘add-favorite’),
tooltip: ‘add to main’,
showSeparator: true,
press: onSupportHeaderItemPress
});
oRendererExtensions.addHeaderEndItem(window.favbutton);
}
} catch (err) {
sap.m.MessageToast.show(err.message);
}

},