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 ;
}