Skip to Content
Author's profile photo Wouter Lemaire

UI5 Control Generator v2 – SAP Web IDE Template

What’s new

  1. UI5 Control Generator in the “New” Context Menu of a UI5 Project
  2. Generates the file from the Wizard with a name which you can choose
  3. Option to generate the Renderer function of the control in a separate file
  4. HTML input text area as part of the wizard (added xml validation before enabling the next step)
  5. Provide a name for the generated properties
  6. Configure the type of the property
  7. Define if you want the setter function to be generated or not.

How to get it

In case you already have the first version, then it will already be updated. If not, you can get it the same way like the first version: https://blogs.sap.com/2016/11/27/custom-ui5-control-generator-sap-web-ide-plugin/

Just create a destination to the feature:

Url: https://htmltocontrolconverter-a6ac3f497.dispatcher.hana.ondemand.com

and activate it in the SAP Web IDE settings:

Example

Try it yourself!

I found a HTML example on codepen that I want to implement in my UI5 Project. You can find it here: (also added the html and css at the end of this blog in case it would be removed on codepen)

https://codepen.io/nenadkaevik/pen/LBarMd?page=2

Start the wizard for generating the new control by right clicking on the “webapp” folder

Give a name to your control and select if you want a separate file for the renderer function

The “Next” button will be enabled as soon as the XML is valid.

Provide a name for each property found in the HTML and configure them

The wizard will generate the following files in your project:

Don’t forget to copy the CSS into the style.css file of the project. (Best practice would be to put it in a library, Control and CSS together)

Now, the generated control can be used in the UI5 Project

<cust:BusinessCard
	Avatar="https://blogs.sap.com/wp-content/uploads/2018/02/file.png"
	Name="SAPUI5"
	Position="Front-end"
	Facebook=""
	Twitter=""
	Instagram=""
	Linkedin=""
	Mail=""
	Website="http://ui5.sap.com">
</cust:BusinessCard>

 

This will be the result, not completely the same as in the CodePen example but that’s due to UI5 CSS.

Other example that I used to test from CodePen:

https://codepen.io/younes-b/pen/qyzxPO?page=1&

You should now be able to convert this html to a control like this:

In case you notice any bug, please report it in the git repository:

https://github.com/lemaiwo/CustomControlGenerator

Thank you!

Appendix

HTML

<div class="card">
  <div class="head">
    <div class="avatar">
      <img src="https://www.w3schools.com/w3images/avatar2.png" alt=""/>
    </div>
    <h2 class="name">Michael Johnson</h2>
    <h5 class="position">Lead Tech Assistant</h5>
  </div>
  <div class="body">
      <ul class="social">
        <li><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#" class="in"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="#" class="em"><i class="fa fa-envelope"></i></a></li>
        <li><a href="#" class="wb"><i class="fa fa-globe"></i></a></li>
      </ul> 
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');
body{
  background:#2d98da;
  font-family: 'Montserrat', sans-serif;
}

.card{
  position:absolute;
  display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:400px;
  border-radius:5px;
  
  animation-name:drop-fade;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity:0;
}

@keyframes drop-fade{
  0%{
    filter:blur(5px);
    opacity:0;
    transform:scale(2) translate(-50%,-50px);
    box-shadow:0px 0px 100px rgba(0,0,0,1);
  }
  100%{
    filter:blur(0px);
    opacity:1;
    transform:scale(1) translate(-50%,-50%);
    box-shadow:0px 40px 70px -15px rgba(0,0,0,0.3);
  }
}

.card .head{
  flex:1;
  padding:20px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.card .head .avatar{
  overflow:hidden;
  height:120px;
  width:120px;
  border-radius:60px;
  box-shadow:0px 20px 30px -10px rgba(0,0,0,0.5);
}

.card .head .avatar img{
  height:100%;
}

.card .head .name{
  margin:20px 0px 5px 0px;
}

.card .head .position{
  margin: 5px 0px 0px 0px;
  color:#456;
}

.card .body{
  padding:0px 10px 20px 10px;
}

.card .body .social{
  margin:0px;
  padding:0px;
  list-style:none;
}

.card .body .social > li{
  display:inline-block;
  margin:0px 5px;
}

.card .body .social > li > a{
  display:block;
  height:40px;
  width:40px;
  border:1px solid #dfdfdf;
  border-radius:40px;
  text-align:center;
}

.card .body .social > li > a > i{
  line-height:40px;
}

.card .body .social > li > a{
  text-decoration:none;
  color:#aaa;
  transition-duration:0.2s;
}

.card .body .social > li > a:hover{
  color:#fff;
}

.card .body .social > li > a.fb:hover{
  background:#3B5998;
  border-color:#3B5998 ;
}

.card .body .social > li > a.tw:hover{
  background:#0084b4;
  border-color:#0084b4 ;
}

.card .body .social > li > a.in:hover{
  background:#0077B5;
  border-color:#0077B5 ;
}

.card .body .social > li > a.em:hover{
  background:#f39c12;
  border-color:#f39c12 ;
}

.card .body .social > li > a.ig:hover{
  background:#e95950;
  border-color:#e95950 ;
}

.card .body .social > li > a.wb:hover{
  background:#212121;
  border-color:#212121 ;
}

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sarbjeet Singh
      Sarbjeet Singh

      Thanks a lot for sharing..

       

      Author's profile photo Helmut Tammen
      Helmut Tammen

      Nice one 🙂

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Good feature..Thanks for sharing

       

      Author's profile photo Tudor Riscutia
      Tudor Riscutia

      Nice one Wouter! I think we talked about this updates at #sitWDF in 2017 🙂

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Indeed, it took me some time 🙂 Better late than never 😉

      Author's profile photo Cong Wang
      Cong Wang

      Thanks a lot for sharing this. Very nice post!

      Author's profile photo Jorge Sousa Villafaina
      Jorge Sousa Villafaina

      Nice blog! I want to try it bur service returns 404 as response, Has it change?

      Thanks a lot for sharing!

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Where do you get this 404 ? it still works for me...

      Author's profile photo Jorge Sousa Villafaina
      Jorge Sousa Villafaina

      Hi! I got 404 when I checked destination from cookpit (attached).

      However after some restarts It work fine! (404 persist in destination check but works)

      I'm really greatful, I think that is a fantastic extension.

      Thanks a lot!

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      The destination check is not working well... you can just ignore it like already noticed 🙂

       

      Enjoy!