Building custom Excel view in SAPUI5 : Technical Part 2

I am starting a small blog series on how to build an excel editor. This might help if you are learning freestyle UI5 development and working with Files.

This is part 2 of the blog series and focus of this blog will be on applying custom CSS to the application to achieve basic look and feel of excel.

Check out Part 1 – before jumping to this blog.

After completing Part 1, we were able to achieve file upload, data parsing and generate tabs and tables dynamically.

But, This does not look like excel at all !!

Excel has tabs at the bottom of the screen, right?

Excel has many utility buttons under Menu Bar, right?

we want vertical lines as well for the table.

lets try to add these features.

1. Tabs at the bottom

all you have to do is change CSS Properties to change positions of Header and Content.

Add a custom style class in IconTabFilter and then change properties in CSS File.

.excel{
display: flex;
flex-direction: column-reverse;
}

After updating the code, refresh the app.

2. Tool Bar

Add below fragment to the View.

Create a new Fragment with name : File.fragment.xml

<core:FragmentDefinition xmlns=”sap.m”
xmlns:core=”sap.ui.core”>
<HBox >
<VBox>
<!– first box –>
<HBox >
<VBox >
<Button icon=”sap-icon://paste” class=”” />
</VBox>
<VBox class=”sapUiTinyMarginBegin”>
<Button icon=”sap-icon://scissors”/>
<Button icon=”sap-icon://copy”/>
<Button icon=”sap-icon://write-new”/>
</VBox>
</HBox>
</VBox>

<!– second box –>
<VBox >
<HBox >
<ComboBox width=”100px”/>
<ComboBox width=”70px”/>
</HBox>
<HBox >
<Button text=”B”/>
<Button text=”I”/>
<Button text=”U”/>
<ToolbarSeparator class=”sapUiTinyMarginBeginEnd sapUiTinyMarginBeginTop”/>
<Button icon=”sap-icon://table-chart”/>
<ToolbarSeparator class=”sapUiTinyMarginBeginEnd sapUiTinyMarginBeginTop”/>
<Button icon=”sap-icon://paint-bucket”/>

</HBox>
</VBox>

</VBox>
</HBox>

</core:FragmentDefinition>

Add it to your existing view.

<IconTabBar >
<items>
<IconTabFilter text=”File”>
<items>
<IconTabFilter text=”Save”/>
</items>
<content>
<c:Fragment fragmentName=”your-ns.view.File” type=”XML”/>
</content>
</IconTabFilter>
<IconTabFilter text=”Home”></IconTabFilter>
… old content as it is …

</items>
</IconTabBar>

After that, it should look like..

3. horizontal and vertical lines ( borders ) in the sap m Table.

Add below style class to CSS file.

.sapMListTblCell {
border-left: 1px solid #ccc;
}

After that, it should look like..

If you do not want a border on left hand side of first column then apply CSS for rest of the columns only.

It can be achieved by First-child property of CSS selectors.

I am starting a small blog series on how to build an excel editor. This might help if you are learning freestyle UI5 development and working with Files.This is part 2 of the blog series and focus of this blog will be on applying custom CSS to the application to achieve basic look and feel of excel.Check out Part 1 – before jumping to this blog.After completing Part 1, we were able to achieve file upload, data parsing and generate tabs and tables dynamically.But, This does not look like excel at all !! Excel has tabs at the bottom of the screen, right? Excel has many utility buttons under Menu Bar, right? we want vertical lines as well for the table. lets try to add these features.1. Tabs at the bottomall you have to do is change CSS Properties to change positions of Header and Content.Add a custom style class in IconTabFilter and then change properties in CSS File.<IconTabBar id=”id_itb” class=”excel”>
<items>
<IconTabFilter text=”worksheet1″>
<ScrollContainer … old code as it is >
<Table … old code as it is>
</Table>
</ScrollContainer>
</IconTabFilter>
</items>
</IconTabBar> .excel{
display: flex;
flex-direction: column-reverse;
} After updating the code, refresh the app. 2. Tool BarAdd below fragment to the View.Create a new Fragment with name : File.fragment.xml<core:FragmentDefinition xmlns=”sap.m”
xmlns:core=”sap.ui.core”>
<HBox >
<VBox>
<!– first box –>
<HBox >
<VBox >
<Button icon=”sap-icon://paste” class=”” />
</VBox>
<VBox class=”sapUiTinyMarginBegin”>
<Button icon=”sap-icon://scissors”/>
<Button icon=”sap-icon://copy”/>
<Button icon=”sap-icon://write-new”/>
</VBox>
</HBox>
</VBox>

</HBox>
</VBox>

</VBox>
</HBox>

</core:FragmentDefinition>Add it to your existing view.<IconTabBar >
<items>
<IconTabFilter text=”File”>
<items>
<IconTabFilter text=”Save”/>
</items>
<content>
<c:Fragment fragmentName=”your-ns.view.File” type=”XML”/>
</content>
</IconTabFilter>
<IconTabFilter text=”Home”></IconTabFilter>
… old content as it is …

</items>
</IconTabBar>After that, it should look like..3. horizontal and vertical lines ( borders ) in the sap m Table.Add below style class to CSS file..sapMListTblCell {
border-left: 1px solid #ccc;
} After that, it should look like..If you do not want a border on left hand side of first column then apply CSS for rest of the columns only.It can be achieved by First-child property of CSS selectors. Read More Technology Blogs by Members articles

#SAP

#SAPTechnologyblog