Trick or Treat? Here’s your trick to create a Lumira extension using – Update for Lumira 1.29
Update for Lumira 1.29: Github Download Link with customizing property to setup background colors in Compose Room
Here on SCN we already have many great viz extensions featured, be it open sourced or developed by SAP Partners. When I recently needed to perform a got the SWOT analysis for one of my projects, I immediately saw this as an opportunity for Lumira!
Business User Case
SWOT Analysis is a useful technique for understanding and an organization’s strengths and weaknesses, and is used to identify the opportunities to expand its markets and improve its business operations, and identify the threats the organization face in its external environment.
To use the extensions one need an excel sheet, which includes four columns: based on Environment (internal/ external), Category (strength/ weaknesses/ opportunities/ threats), and Description and Measure (corresponding to the sequence of category section).
A SWOT analysis aims to identify the key internal and external factors that are important in order to achieve a business objective. A SWOT analysis groups key pieces of information into two main levels:
- internal factors – the strengths and weaknesses internally in the organization
- external factors – the opportunities and threats represented by the external environment of the organization
Developing the Extension for SAP Lumira
1. Create a DIV extension
The SWOT extension is a pretty simple project, the only trick is replacing DIV with SVG. The first step is creating a new div based data visualization extension project in Web IDE.
- – In SAP Web IDE, from File menu choose New -> Project from Template
- – Choose Visualization Extension
- – Type all necessary information including Project Name, Extension Name, ID and so on.
- – The most important step is in “4 Quick Layout Configuration”, choose “using DIV” in PlotArea
2. Sort data with special sequence
The next step is mapping data with d3.nest() and link .sortKeys() with a callback function. Each level can be sorted by a key – a simple solution is using d3.ascending or d3.descendingas property by alphabetic or numeric order. Status, fortunately, can be sorted in ascending order, but Priority requires a custom order. Create an array in the order you want and use .indexOf() to create the order’s comparator function.
3. Binding data twice
After grouping the data based on their category property, the container will bind the data first time to <div> to each card. D3’s selection.data() function collaborates with .enter() binding data to selected not existing elements. Binding is like “attaching” or associating data to specific elements, so that later user can reference those values to apply mapping rules. The first binding will create four <div> cards and save the result in a variable.
Content_sec will be assigned to all of the <div class=”contentSection”> attached with data, but each of the div’s only represent themselves with filtered parts of the total. The are required to bind twice and the description for each of the cards , and append <ul> and <li> for descriptions.
4. CSS for card, card title and capital letter
The last step is creating a container for cards using flexbox. Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Each of the cards are the flex items, and can be contained inside a parent element as flex container.
If the regular layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”. Basically, the items will be laid out following either the main axis (left-right) or the cross axis (top-bottom).
/* parent element*/
.container{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
height:100%;
}
/* child element */
.swotanlyContainer .contentSection{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
text-align: center;
width:44%;
height: 50%;
font-size: 1.4em;
color: #003459;
border-color: #ccc;
border-style:solid;
border-width:medium;
position:relative;
}
The Capital letter for each card comes from
content_sec.append(“div”)
.attr(“class”, “capitalLet float_right”)
.text(function(d){
return d.key.split(“”)[0];
});
And attach the following css
.swotanlyContainer .capital_letR{
font-family: “Times New Roman”,Georgia,Serif;
float: right;
margin: 0 0 1em 1em;
}
The internal and external array titles are text on top of a background image which is stores in
bundles -> sap -> viz -> ext -> swotanalysis -> sap_viz_ext_swotanalysis -> style -> array.svg
Result
Colorful version
*TIP: sectioncolor array contains the background colors of each card, and the sequence of the color is the same as the elements in priority_order array.
Next-Step
I’m working on defining the custom property in compose room of Lumira to setup color for each card by user. More reference in below link: