@openui5/sap.ui.documentation 1.121.1 → 1.122.0

package/src/sap/ui/documentation/sdk/view/Resources.view.xml

@@ -0,0 +1,725 @@
+<mvc:View
+	controllerName="sap.ui.documentation.sdk.controller.Resources"
+	xmlns="sap.m"
+	xmlns:f="sap.f"
+	xmlns:card="sap.f.cards"
+	xmlns:core="sap.ui.core"
+	xmlns:mvc="sap.ui.core.mvc"
+	xmlns:grid="sap.ui.layout.cssgrid"
+	xmlns:custom="sap.ui.documentation"
+	displayBlock="true"
+	height="100%">
+
+	<ScrollContainer
+		id="sapUiDemoKitResourcesPage"
+		class="sapUiDemoKitResourcesPage"
+		vertical="true"
+		horizontal="false"
+		height="100%"
+		width="100%">
+
+		<VBox class="sapUiDemoKitResourcesIntroCardSpacing">
+			<f:Card class="sapUiDemoKitResourcesIntroCard">
+				<f:header>
+					<card:Header
+						title="{i18n>RESOURCES_INTRO_CARD_TITLE}"
+						subtitle="{i18n>RESOURCES_INTRO_CARD_SUBTITLE}"
+						subtitleMaxLines="10" />
+				</f:header>
+			</f:Card>
+		</VBox>
+
+		<grid:CSSGrid class="sapUiDemoKitResourcesLayoutSpacing">
+			<!-- Page Content Ratio Config -->
+			<grid:customLayout>
+				<grid:GridResponsiveLayout>
+					<grid:layout>
+						<grid:GridSettings gridTemplateColumns="1fr" gridColumnGap="1rem" />
+					</grid:layout>
+					<grid:layoutL>
+						<grid:GridSettings gridTemplateColumns="2fr 1fr" gridColumnGap="1rem" />
+					</grid:layoutL>
+					<grid:layoutXL>
+						<grid:GridSettings gridTemplateColumns="3fr 1fr" gridColumnGap="1rem" />
+					</grid:layoutXL>
+				</grid:GridResponsiveLayout>
+			</grid:customLayout>
+
+			<grid:items>
+				<!-- Main -->
+				<grid:CSSGrid id="sapUiDemoKitResourcesMain" class="sapUiDemoKitResourcesMain">
+					<grid:customLayout>
+						<grid:GridBasicLayout gridRowGap="3rem" />
+					</grid:customLayout>
+
+					<!-- #1 Category: Featured -->
+					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryFeatured">
+						<grid:customLayout>
+							<grid:GridBasicLayout gridRowGap="1rem" />
+						</grid:customLayout>
+
+						<Title
+							class="sapUiDemoKitResourcesCategoryTitle"
+							text="{i18n>RESOURCES_CATEGORY_TITLE_FEATURED}"
+							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }"
+							level="H3"
+							wrapping="true" />
+
+						<grid:CSSGrid>
+							<grid:customLayout>
+								<grid:GridResponsiveLayout>
+									<grid:layoutS>
+										<grid:GridSettings
+											gridTemplateColumns="1fr"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutS>
+									<grid:layout>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(2, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layout>
+									<grid:layoutXL>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(3, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutXL>
+								</grid:GridResponsiveLayout>
+							</grid:customLayout>
+
+							<!-- Icon Explorer -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_ICON_EXPLORER}" iconSrc="sap-icon://sap-ui5" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_ICON_EXPLORER}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_ICON_EXPLORER}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/iconExplorer/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- Accessibility Guide -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard"
+								visible="{
+									path: 'resources>/accessibilityGuide',
+									formatter: '.formatter.formatResourceCardVisibility'
+								}">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_ACC_GUIDE}" iconSrc="sap-icon://show" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_ACC_GUIDE}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_ACC_GUIDE}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/accessibilityGuide/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+						</grid:CSSGrid>
+					</grid:CSSGrid>
+
+					<!-- #2 Category: Development Tools -->
+					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryDevTools">
+						<grid:customLayout>
+							<grid:GridBasicLayout gridRowGap="1rem" />
+						</grid:customLayout>
+
+						<Title
+							class="sapUiDemoKitResourcesCategoryTitle"
+							text="{i18n>RESOURCES_CATEGORY_TITLE_DEV_TOOLS}"
+							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }"
+							level="H3"
+							wrapping="true" />
+
+						<grid:CSSGrid>
+							<grid:customLayout>
+								<grid:GridResponsiveLayout>
+									<grid:layoutS>
+										<grid:GridSettings
+											gridTemplateColumns="1fr"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutS>
+									<grid:layout>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(2, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layout>
+									<grid:layoutXL>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(3, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutXL>
+								</grid:GridResponsiveLayout>
+							</grid:customLayout>
+
+							<!-- UI5 Tooling -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_TOOLING}" iconSrc="sap-icon://hello-world" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_TOOLING}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_TOOLING}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/tooling/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- SAP Fiori Tools -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_FIORI_TOOLS}" iconSrc="sap-icon://fx" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_FIORI_TOOLS}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_FIORI_TOOLS}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/fioriTools/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- Card Explorer -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_CARD_EXPLORER}" iconSrc="sap-icon://card" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_CARD_EXPLORER}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_CARD_EXPLORER}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/cardExplorer/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- Flexible Programming Model Explorer -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard"
+								visible="{
+									path: 'resources>/fpmExplorer',
+									formatter: '.formatter.formatResourceCardVisibility'
+								}">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_FPM_EXPLORER}" iconSrc="sap-icon://explorer" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_FPM_EXPLORER}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_FPM_EXPLORER}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/fpmExplorer/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- SAP Business Application Studio -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_BUSINESS_APP_STUDIO}" iconSrc="sap-icon://command-line-interfaces" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_BUSINESS_APP_STUDIO}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_BUSINESS_APP_STUDIO}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/businessAppStudio/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+						</grid:CSSGrid>
+					</grid:CSSGrid>
+
+					<!-- #3 Category: Customising -->
+					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryCustomising">
+						<grid:customLayout>
+							<grid:GridBasicLayout gridRowGap="1rem" />
+						</grid:customLayout>
+
+						<Title
+							class="sapUiDemoKitResourcesCategoryTitle"
+							text="{i18n>RESOURCES_CATEGORY_TITLE_CUSTOMISING}"
+							level="H3"
+							wrapping="true"
+							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }" />
+
+						<grid:CSSGrid>
+							<grid:customLayout>
+								<grid:GridResponsiveLayout>
+									<grid:layoutS>
+										<grid:GridSettings
+											gridTemplateColumns="1fr"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutS>
+									<grid:layout>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(2, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layout>
+									<grid:layoutXL>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(3, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutXL>
+								</grid:GridResponsiveLayout>
+							</grid:customLayout>
+
+							<!-- UI Theme Designer -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_THEME_DESIGNER}" iconSrc="sap-icon://palette" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_THEME_DESIGNER}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_THEME_DESIGNER}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/themeDesigner/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- Theme Parameter Toolbox -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_THEME_PARAMETER_TOOLBOX}" iconSrc="sap-icon://sap-box" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_THEME_PARAMETER_TOOLBOX}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_THEME_PARAMETER_TOOLBOX}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/themeParameterToolbox/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- SAPUI5 Flexibility -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_FLEXIBILITY}" iconSrc="sap-icon://wrench" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_FLEXIBILITY}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_FLEXIBILITY}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/flexibility/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+						</grid:CSSGrid>
+					</grid:CSSGrid>
+
+					<!-- #4 Category: Troubleshooting -->
+					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryTroubleshooting">
+						<grid:customLayout>
+							<grid:GridBasicLayout gridRowGap="1rem" />
+						</grid:customLayout>
+
+						<Title
+							class="sapUiDemoKitResourcesCategoryTitle"
+							text="{i18n>RESOURCES_CATEGORY_TITLE_TROUBLESHOOTING}"
+							level="H3"
+							wrapping="true"
+							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }" />
+
+						<grid:CSSGrid>
+							<grid:customLayout>
+								<grid:GridResponsiveLayout>
+									<grid:layoutS>
+										<grid:GridSettings
+											gridTemplateColumns="1fr"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutS>
+									<grid:layout>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(2, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layout>
+									<grid:layoutXL>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(3, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutXL>
+								</grid:GridResponsiveLayout>
+							</grid:customLayout>
+
+							<!-- UI5 Inspector -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_INSPECTOR}" iconSrc="sap-icon://inspection" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_INSPECTOR}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_INSPECTOR}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/inspector/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- Support Assistant -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_SUPPORT_ASSISTANT}" iconSrc="sap-icon://person-placeholder" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_SUPPORT_ASSISTANT}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_SUPPORT_ASSISTANT}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/supportAssistant/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+						</grid:CSSGrid>
+					</grid:CSSGrid>
+
+					<!-- #5 Category: Testing -->
+					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryTesting">
+						<grid:customLayout>
+							<grid:GridBasicLayout gridRowGap="1rem" />
+						</grid:customLayout>
+
+						<Title
+							class="sapUiDemoKitResourcesCategoryTitle"
+							text="{i18n>RESOURCES_CATEGORY_TITLE_TESTING}"
+							level="H3"
+							wrapping="true"
+							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }" />
+
+						<grid:CSSGrid>
+							<grid:customLayout>
+								<grid:GridResponsiveLayout>
+									<grid:layoutS>
+										<grid:GridSettings
+											gridTemplateColumns="1fr"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutS>
+									<grid:layout>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(2, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layout>
+									<grid:layoutXL>
+										<grid:GridSettings
+											gridTemplateColumns="repeat(3, 1fr)"
+											gridAutoRows="minmax(15rem, auto)"
+											gridGap="1rem" />
+									</grid:layoutXL>
+								</grid:GridResponsiveLayout>
+							</grid:customLayout>
+
+							<!-- Test Recorder -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard"
+								visible="{
+									path: 'resources>/testRecorder',
+									formatter: '.formatter.formatResourceCardVisibility'
+								}">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_TEST_RECORDER}" iconSrc="sap-icon://record" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing"
+										wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_TEST_RECORDER}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_TEST_RECORDER}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/testRecorder/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+							<!-- wdi5 -->
+							<f:Card class="sapUiDemoKitResourcesRegularCard">
+								<f:header>
+									<card:Header title="{i18n>RESOURCES_CARD_TITLE_WDI5}" iconSrc="sap-icon://order-status" />
+								</f:header>
+								<f:content>
+									<VBox class="sapUiDemoKitResourcesCardContentSpacing"
+										wrap="Wrap">
+										<Text text="{i18n>RESOURCES_CARD_DESC_WDI5}">
+											<layoutData>
+												<FlexItemData growFactor="1" />
+											</layoutData>
+										</Text>
+
+										<Button
+											text="{i18n>RESOURCES_CARD_LINK_WDI5}"
+											icon="sap-icon://action"
+											type="Transparent"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>/wdi5/href}" />
+											</customData>
+										</Button>
+									</VBox>
+								</f:content>
+							</f:Card>
+
+						</grid:CSSGrid>
+					</grid:CSSGrid>
+
+				</grid:CSSGrid> <!-- Main Container End-->
+
+				<!-- Aside -->
+				<grid:CSSGrid id="sapUiDemoKitResourcesAside" class="sapUiDemoKitResourcesAside">
+					<VBox class="sapUiDemoKitResourcesAsideDekstop" wrap="Wrap">
+						<f:Card class="sapUiDemoKitResourcesAsideCard">
+							<f:header>
+								<card:Header title="{i18n>RESOURCES_ASIDE_CARD_TITLE}" />
+							</f:header>
+							<f:content>
+								<List items="{path: 'resources>/_raw/', sorter: {path: 'text'}}" showSeparators="None">
+									<InputListItem
+										label="{resources>text}"
+										visible="{
+											path: 'resources>',
+											formatter: '.formatter.formatResourceCardVisibility'
+										}">
+
+										<Button
+											type="Transparent"
+											icon="sap-icon://action"
+											accessibleRole="Link"
+											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+											press=".onButtonPress">
+											<customData>
+												<core:CustomData key="href" value="{resources>href}" />
+											</customData>
+										</Button>
+									</InputListItem>
+								</List>
+							</f:content>
+						</f:Card>
+					</VBox>
+
+					<VBox class="sapUiDemoKitResourcesAsideMobile" wrap="Wrap">
+						<Panel class="sapUiDemoKitResourcesAsidePanel" expandable="true" headerText="{i18n>RESOURCES_ASIDE_CARD_TITLE}">
+							<List showSeparators="None" items="{path: 'resources>/_raw/', sorter: {path: 'text'}}">
+								<InputListItem
+									label="{resources>text}"
+									visible="{
+										path: 'resources>',
+										formatter: '.formatter.formatResourceCardVisibility'
+									}">
+
+									<Button
+										type="Transparent"
+										icon="sap-icon://action"
+										accessibleRole="Link"
+										tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
+										press=".onButtonPress">
+										<customData>
+											<core:CustomData key="href" value="{resources>href}" />
+										</customData>
+									</Button>
+								</InputListItem>
+							</List>
+						</Panel>
+					</VBox>
+				</grid:CSSGrid> <!-- Aside Container End-->
+
+			</grid:items>
+		</grid:CSSGrid>
+
+		<core:Fragment fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
+	</ScrollContainer>
+</mvc:View>