How to create a custom UI5 control

WRITTEN BY: supportmymoto.com STAFF

Typically, it’s helpful to create your individual UI management. It’s an important concept for code reuse, and one factor I’ve actually loved about UI5 is how simple it’s to create your individual management. That stated, there does appear to be a little bit of confusion on this matter and lots of don’t know the place to begin – so therefore, I’m scripting this weblog to hopefully get you kickstarted into constructing your individual suite of superior controls.

Okay, allow us to leap proper in

I’m going to go forward and assume you’ve the next data already

  • SAPUI5 or OpenUI5 (can write your individual customized utility for fiori launchpad)
  • Javascript and jQuery
  • HTML and CSS

First up, create an entire new undertaking, and a few folders to your controls namespace. I extremely advocate you create a library of controls in a single frequent namespace, and reference it out of your different functions so you possibly can reuse all of your controls, quite than creating customized controls inside your utility (until it truly is, very utility particular)

I’ve created a path of “dalrae/ui/containers” and “dalrae/ui/controls”, the place I plan to seperate all my controls into two classes, immediately I’ll be specializing in constructing a a container management (a management that has a content material aggregation for rendering baby controls). You may create no matter sort of classes feels acceptable to you.

And immediately I’ll construct a container I’m going to name “ShadowBox” (which might be a div with a shadow impact), and clarify the steps I’m taking as I am going.
So, I do know you simply need to hurry up and see the code, so right here you go, I construct the next skeleton to start my new management, be at liberty to repeat & paste this for all of your new ui controls


sap.ui.outline(
  ['sap/ui/core/Control'],
  operate(Management) {
  return Management.lengthen("dalrae.ui.containers.ShadowBox",{
       metadata: {
            properties: {},
            aggregations: {},
       },
       renderer: operate(oRm,oControl){
            //to do: render the management
       },
       onAfterRendering: operate() {
            //if I must do any submit render actions, it is going to occur right here
            if(sap.ui.core.Management.prototype.onAfterRendering) {
                 sap.ui.core.Management.prototype.onAfterRendering.apply(this,arguments); //run the tremendous class's technique first
            }
       },
  });
  }
);




Okay, so first up, discover I’m extending sap.ui.core.management, in order that I get all the superior juicy ui5 performance SAP has constructed for us
Secondly, discover I’ve declared my namespace to match my folder path and sophistication title dalrae.ui.containers.ShadowBox to match my dalrae/ui/containers/ShadowBox.js path

Within the above instance I’ve already put in a renderer operate (as a result of I intend to do customized rendering)
And in addition an onAfterRendering (which actually, I most likely received’t use right here, however I needed to place it there for the sake of your template)

Okay, earlier than entering into constructing this container, I need to display that it really works, so I’ll add a easy render and slap it into an xml view

I add the next code to display primary html rendering


sap.ui.outline(
  ['sap/ui/core/Control'],
  operate(Management) {
  return Management.lengthen("dalrae.ui.containers.ShadowBox",{
       metadata: {
            properties: {},
            aggregations: {},
       },
       renderer: operate(oRm,oControl){
            oRm.write("<span>HELLO WORLD</span>"); //output some html so we are able to see the management is working!
       },
       onAfterRendering: operate() {
            //if I must do any submit render actions, it is going to occur right here
            if(sap.ui.core.Management.prototype.onAfterRendering) {
                 sap.ui.core.Management.prototype.onAfterRendering.apply(this,arguments); //run the tremendous class's technique first
            }
       },
  });
  }
);




And to make use of it in my xml view, I import the namespace, then I ought to see my “HELLO WORLD” textual content for my part


<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:dalraeContainers="dalrae.ui.containers"
xmlns:core="sap.ui.core"
controllerName="dalrae.doco.Web page">
       <Web page title="D'Alrae UI5 Library" enableScrolling="true">
       <headerContent>
       </headerContent>
       <content material>
            <dalraeContainers:ShadowBox />
       </content material>
  </Web page>
</mvc:View>




And viola! there it’s

See also  OnePlus 3 and OnePlus 3T's latest OxygenOS beta brings Android 9 Pie

HelloWorld.PNG

Simple when you’ve seen a easy wireframe proper?

You’ve most likely already found out that the oRm object is a renderer, and the oControl object is your management occasion

The oRm is class sort sap.ui.core.RenderManager
Bookmark that hyperlink for later and do your individual analysis

Now I’m going to make this factor really helpful, and doc my progress

That is going to be a container for different controls, so I want so as to add an aggregation, and I’ll use the usual title of “content material” for ease of use

That is disgustingly simple to do, I simply add my aggregation to the metadata and in addition optionally specify it because the default aggregation (by making it default, I don’t should specify the <content material> tag in my xml view, will probably be assumed, similar to in a VBox or HBox)

Higher but, all properties and aggregations have the get/set strategies created routinely for you! so we are able to simply go forward and use it

Very first thing I’m going to do is get content material to render, I’m not going to elucidate all of the options of the oRm right here, however will present a number of feedback within the code.


sap.ui.outline(
    ['sap/ui/core/Control'],
    operate(Management) {
        return Management.lengthen("dalrae.ui.containers.ShadowBox",{
            metadata: {
                properties: {},
                aggregations: {
                    content material: {
                        sort: "sap.ui.core.Management"
                    }
                },
                defaultAggregation: "content material",
            },
 
            renderer: operate(oRm,oControl){
                //first up, render a div for the ShadowBox
                oRm.write("<div");
     
                //subsequent, render the management info, this handles your sId (you should do that to your management to be correctly tracked by ui5).
                oRm.writeControlData(oControl);
                oRm.write(">");
     
                //subsequent, iterate over the content material aggregation, and name the renderer for every management
                $(oControl.getContent()).every(operate(){
                    oRm.renderControl(this);
                });
     
                //and clearly, shut off our div
                oRm.write("</div>")
            },
 
            onAfterRendering: operate() {
                if(sap.ui.core.Management.prototype.onAfterRendering) {
                 sap.ui.core.Management.prototype.onAfterRendering.apply(this,arguments);
                }
            },
 
        });
    }
);




Now Unwell add a few controls to the content material in my xml view like so


<dalraeContainers:ShadowBox>
       <Label textual content="Nicely nicely nicely" />
       <Enter worth="we have now a container" />
</dalraeContainers:ShadowBox>



And when run within the browser, I can see the label and enter controls rendered

Demo1.PNG

Subsequent, I’m going to permit the developer to customize the width and top of this container

To take action, I’ll add them as properties to the metadata, and add a method attribute in my renderer


sap.ui.outline(
    ['sap/ui/core/Control'],
    operate(Management) {
        return Management.lengthen("dalrae.ui.containers.ShadowBox",{
            metadata: {
                properties: {
                    width: {
                        sort: "sap.ui.core.CSSSize", //that is elective, nevertheless it helps forestall errors in your code by implementing a sort
                        defaultValue: "100%" //that is additionally elective, however beneficial, because it prevents your properties being null
                    },
                    top: {
                        sort: "sap.ui.core.CSSSize",
                        defaultValue: "auto"
                    }
                },
                aggregations: {
                    content material: {
                        sort: "sap.ui.core.Management"
                    }
                },
                defaultAggregation: "content material",
            },
  
            renderer: operate(oRm,oControl){
                //first up, render a div for the ShadowBox
                oRm.write("<div");
                //render width & top properties
                oRm.write(" model="width: " + oControl.getWidth() + "; top: " + oControl.getHeight() + ";"");
                //subsequent, render the management info, this handles your sId (you should do that to your management to be correctly tracked by ui5).
                oRm.writeControlData(oControl);
                oRm.write(">");
      
                //subsequent, iterate over the content material aggregation, and name the renderer for every management
                $(oControl.getContent()).every(operate(){
                    oRm.renderControl(this);
                });
      
                //and clearly, shut off our div
                oRm.write("</div>")
            },
  
            onAfterRendering: operate() {
                if(sap.ui.core.Management.prototype.onAfterRendering) {
                 sap.ui.core.Management.prototype.onAfterRendering.apply(this,arguments);
                }
            },
  
        });
    }
);




Now I can set a width and/or top in my xml and may see it taking impact in my browser


        <dalraeContainers:ShadowBox
            width="200px"
            >
            <Label textual content="Nicely nicely nicely" />
            <Enter worth="we have now a container" />
        </dalraeContainers:ShadowBox>



Demo2.PNG

Lastly, we get to the nice half, what this management is supposed to do, is look fairly

See also  Do sea turtles get high from eating jellyfish?

So to do this, we’ll use some CSS, and we’ll do it with a css file (not within the model tag, which might be repeated for every occasion)
As a result of this can be a UI Management you possibly can’t anticipate the developer to import your css, the management itself will make sure the css it wants will get imported.

my css file “css/dalrae.css” appears to be like like this (it creates a shadow)


.dalrShadowBox {
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    border-radius: 4px;
    padding: 4px;
}




my new management code appears to be like like this

(notice the brand new init operate, fired when the management is first instantiated)


sap.ui.outline(
    ['sap/ui/core/Control'],
    operate(Management) {
        return Management.lengthen("dalrae.ui.containers.ShadowBox",{
            metadata: {
                properties: {
                    width: {
                        sort: "sap.ui.core.CSSSize", //that is elective, nevertheless it helps forestall errors in your code by implementing a sort
                        defaultValue: "100%" //that is additionally elective, however beneficial, because it prevents your properties being null
                    },
                    top: {
                        sort: "sap.ui.core.CSSSize",
                        defaultValue: "auto"
                    }
                },
                aggregations: {
                    content material: {
                        sort: "sap.ui.core.Management"
                    }
                },
                defaultAggregation: "content material",
            },
  
            init: operate() {
                //initialisation code, on this case, guarantee css is imported
                var libraryPath = jQuery.sap.getModulePath("dalrae.ui"); //get the server location of the ui library
                jQuery.sap.includeStyleSheet(libraryPath + "/../css/dalrae.css"); //specify the css path relative from the ui folder
            },
  
            renderer: operate(oRm,oControl){
                //first up, render a div for the ShadowBox
                oRm.write("<div");
      
                //add this controls model class (plus any extra ones the developer has specified)
                oRm.addClass("dalrShadowBox");
                oRm.writeClasses(oControl);
      
                //render width & top properties
                oRm.write(" model="width: " + oControl.getWidth() + "; top: " + oControl.getHeight() + ";"");
      
      
                //subsequent, render the management info, this handles your sId (you should do that to your management to be correctly tracked by ui5).
                oRm.writeControlData(oControl);
                oRm.write(">");
      
                //subsequent, iterate over the content material aggregation, and name the renderer for every management
                $(oControl.getContent()).every(operate(){
                    oRm.renderControl(this);
                });
      
                //and clearly, shut off our div
                oRm.write("</div>")
            },
  
            onAfterRendering: operate() {
                if(sap.ui.core.Management.prototype.onAfterRendering) {
                 sap.ui.core.Management.prototype.onAfterRendering.apply(this,arguments);
                }
            },
  
        });
    }
);




Now, with out altering the xml, the browser renders like so
Demo3.PNG

See also  How to Pick the Right Cricket Helmets?

So ShadowBox has a shadow, as anticipated, nevertheless it wants a background (like white), however I didn’t put that in my css class as a result of I do need that customisable by the developer (so simply apply the identical logic as width and top). Whereas I’m at it ,could as nicely add a margin property too in order that it doesn’t hug the sting of the display (in fact you are able to do this with inbuilt css lessons, however hey… I prefer to make issues simple)

new management code


sap.ui.outline(
    ['sap/ui/core/Control'],
    operate(Management) {
     
        return Management.lengthen("dalrae.ui.containers.ShadowBox",{
            metadata: {
                properties: {
                    width: {
                        sort: "sap.ui.core.CSSSize", //that is elective, nevertheless it helps forestall errors in your code by implementing a sort
                        defaultValue: "auto" //that is additionally elective, however beneficial, because it prevents your properties being null
                    },
                    top: {
                        sort: "sap.ui.core.CSSSize",
                        defaultValue: "auto"
                    },
                    background: {
                        sort: "sap.ui.core.CSSColor",
                        defaultValue: "#ffffff"
                    },
                    margin: {
                        sort: "sap.ui.core.CSSSize",
                        defaultValue: "5px"
                    }
                },
                aggregations: {
                    content material: {
                        sort: "sap.ui.core.Management"
                    }
                },
                defaultAggregation: "content material",
            },
         
            init: operate() {
                //initialisation code, on this case, guarantee css is imported
                var libraryPath = jQuery.sap.getModulePath("dalrae.ui"); //get the server location of the ui library
                jQuery.sap.includeStyleSheet(libraryPath + "/../css/dalrae.css"); //specify the css path relative from the ui folder
            },
         
            renderer: operate(oRm,oControl){
                //first up, render a div for the ShadowBox
                oRm.write("<div");
             
                //add this controls model class (plus any extra ones the developer has specified)
                oRm.addClass("dalrShadowBox");
                oRm.writeClasses(oControl);
             
                //render width & top & background properties
                oRm.write(" model="width: " + oControl.getWidth()
                                + "; top: " + oControl.getHeight()
                                + "; background-color: " + oControl.getBackground()
                                + "; margin: " + oControl.getMargin()
                                + """);
             
                //subsequent, render the management info, this handles your sId (you should do that to your management to be correctly tracked by ui5).
                oRm.writeControlData(oControl);
                oRm.write(">");
             
                //subsequent, iterate over the content material aggregation, and name the renderer for every management
                $(oControl.getContent()).every(operate(){
                    oRm.renderControl(this);
                });
             
                //and clearly, shut off our div
                oRm.write("</div>")
            },
         
            onAfterRendering: operate() {
                if(sap.ui.core.Management.prototype.onAfterRendering) {
                 sap.ui.core.Management.prototype.onAfterRendering.apply(this,arguments);
                }
            },
         
        });
     
    }
);




Now my browser appears to be like like this..

Demo5.PNG

We’re finished! there’s a totally purposeful ShadowBox management for making use of a pleasant dropshadow panel for controls to take a seat within!

Goodbye…

This was my first weblog on SCN, hope you loved it
Subsequent up, I’ll increase on this matter and display

  1. lengthen a normal UI5 management
  2. Including a totally accessible “press” occasion to your customized management

@LordOfTheStack

NOTE : Please do not copy - https://supportmymoto.com

Leave a Reply