Employee Leave Portal in sapUi5

HR Employee Leave Portal in sap UI5

view.xml


<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form"
controllerName="emp_leave.s1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="HR Leave Management Portal">
<content>


<f:Form id="" editable="true" ariaLabelledBy="Title1">
<f:layout>
<f:ResponsiveGridLayout
adjustLabelSpan="false" emptySpanXL="0" emptySpanM="0"
emptySpanS="0" columnsXL="2" columnsL="2" columnsM="2" />
</f:layout>
<f:formContainers>
<f:FormContainer ariaLabelledBy="Title2">
<f:formElements>
<f:FormElement>
<VBox>
<Text text="Manager Leave Register"></Text>
<Label text="Hello Digvijay"></Label>
<Label text="we loading your data"></Label>


<IconTabBar id="idIconTabBar"
select="handleIconTabBarSelect">
<items>

<IconTabFilter icon="sap-icon://group"
iconColor="Negative" text="My Team Leave">
<content>
<IconTabBar
select="handleIconTabBarSelect">
<items>

<IconTabFilter
iconColor="Negative" text="Pending leave">
<content>







<f:Form  editable="true" ariaLabelledBy="Title1">
<f:layout>
<f:ResponsiveGridLayout
adjustLabelSpan="false" emptySpanXL="0" emptySpanM="0"
emptySpanS="0" columnsXL="2" columnsL="2" columnsM="2" />
</f:layout>
<f:formContainers>
<f:FormContainer ariaLabelledBy="Title2">
<f:formElements>
<f:FormElement>

<GenericTile
class="sapUiTinyMarginBegin sapUiTinyMarginTop " header="Tushar Patil" >
<TileContent >
<VBox>
<HBox>
<ImageContent src="css/image/tushar.jpeg" />
<Text text = "From " class="sapUiTinyMarginBegin"></Text>
<Text text = "To " class="sapUiTinyMarginBegin"></Text>
</HBox>
<Text text = "Reason: "></Text>
</VBox>
</TileContent>
</GenericTile>




</f:FormElement>

</f:formElements>
</f:FormContainer>
<f:FormContainer>
<f:formElements>
<f:FormElement>

<GenericTile
class="sapUiTinyMarginBegin sapUiTinyMarginTop " header="Digvijay"
subheader="Quantity" editable="false">
<TileContent>
<NumericContent id="tab2"
animateTextChange="true" value="{quantity}" valueColor="bad"></NumericContent>
</TileContent>
</GenericTile>





</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>



</content>
</IconTabFilter>



<IconTabFilter
iconColor="Negative" text="Employee on Leave">
<content>

</content>
</IconTabFilter>
</items>
</IconTabBar>





</content>
</IconTabFilter>

<IconTabSeparator icon="sap-icon://open-command-field" />

<IconTabFilter icon="sap-icon://customer"
iconColor="Positive" text="My Leave" >
<content>

</content>
</IconTabFilter>

<IconTabSeparator icon="sap-icon://open-command-field" />

<IconTabFilter icon="sap-icon://document"
iconColor="Neutral" text="Leave Policy" >
<content>

</content>
</IconTabFilter>

<IconTabSeparator icon="sap-icon://open-command-field" />

<IconTabFilter icon="sap-icon://overflow"
iconColor="Critical" text="Show More" >
<content>

</content>
</IconTabFilter>


</items>
</IconTabBar>
</VBox>

</f:FormElement>

</f:formElements>
</f:FormContainer>
<f:FormContainer>
<f:formElements>
<f:FormElement>
<VBox>
<Text text="Employee on Leave REsister"></Text>
<Table>
</Table>
</VBox>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</content>
</Page>
</core:View>


style.css

.tileLayout{
border-bottom-right-radius: 12px !important;
    border-top-left-radius: 12px !important;
}

.sapMGT.OneByOne {
    width: 18rem !important;
}


.sapMGTHdrContent{
height: fit-content !important; 
}



Output  :


2 Comments

Previous Post Next Post