UI5 Control Generator v2 – SAP Web IDE Template
What’s new
- UI5 Control Generator in the “New” Context Menu of a UI5 Project
- Generates the file from the Wizard with a name which you can choose
- Option to generate the Renderer function of the control in a separate file
- HTML input text area as part of the wizard (added xml validation before enabling the next step)
- Provide a name for the generated properties
- Configure the type of the property
- 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 ;
}
Thanks a lot for sharing..
Nice one 🙂
Good feature..Thanks for sharing
Nice one Wouter! I think we talked about this updates at #sitWDF in 2017 🙂
Indeed, it took me some time 🙂 Better late than never 😉
Thanks a lot for sharing this. Very nice post!
Nice blog! I want to try it bur service returns 404 as response, Has it change?
Thanks a lot for sharing!
Where do you get this 404 ? it still works for me...
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!
The destination check is not working well... you can just ignore it like already noticed 🙂
Enjoy!