Мне нужно чтоб на первом шаге была добавлена возможность отслеживания клика по карточке. Ничего в коде нельзя менять кроме первого шага и подключения возможно новых библиотек (если нужно). Может быть нужно контрол поменять или ешё что-то придумать. Но мне сейчас очень нравится этот дизайн и я бы хотел чтоб такой вид и остался у первого шага. Единственное мне нужно отслеживать выбор пользователя 

<mvc:View 
  controllerName="jbcommon.UserCreate.controller.Wizard"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:card="sap.f.cards"
  xmlns:f="sap.f"
  xmlns:l="sap.ui.layout"
  xmlns:s000="jblibs.s000"
    xmlns:core="sap.ui.core"
  xmlns="sap.m" 
  displayBlock="true">
  <Shell id="shell">
    <App id="app">
      <NavContainer id="wizardNavContainer">
        <pages>
          <Page id="pageForm" showHeader="false" 
          showFooter="{= !!${NewUser>/Email} &amp;&amp; (${NewUser>/EmailState} === 'None') &amp;&amp; !!${NewUser>/LastName} &amp;&amp; !!${NewUser>/FirstName} &amp;&amp; (!!${NewUser>/EmployeeIDGenerate} || ${NewUser>/EmployeeIDState}=== 'None') &amp;&amp; (!!${NewUser>/UserIDGenerate} || ${NewUser>/UserIDState}=== 'None')
          &amp;&amp; ((!!${NewUser>/Password} &amp;&amp; (${NewUser>/PasswordState} === 'None') &amp;&amp; !!${NewUser>/PasswordСonfirmation} &amp;&amp; (${NewUser>/PasswordStateСonfirmation} === 'None')) || !!${NewUser>/PasswordGenerate})}">
            <content>
              <Wizard id="wizardUserCreate"
                
                showNextButton="true"
                complete="UserCreateComplete">

                                <WizardStep id="CreationModeStep"
                                        title="Способ создания"
                                        icon="sap-icon://sys-enter-2"
                                        validated="{= ${NewUser>/CreationMode} === 'new' || (${NewUser>/CreationMode} === 'copy' &amp;&amp; !!${NewUser>/TemplateUserID}) }"
                                        activate="onCreationModeStepActivate">
                                    <MessageStrip
                                        class="sapUiMediumMarginBottom"
                                        text="Выберите, как вы хотите создать нового пользователя."
                                        showIcon="true"
                                        type="Information"/>
                                    <l:Grid
                                        containerQuery="true"
                                        defaultSpan="XL6 L6 M12 S12"
                                        hSpacing="1rem"
                                        vSpacing="1rem">
                                        
                                        <f:Card class="sapUiSizeCompact" press="onSelectCreationMode">
                                            <f:customData>
                                                <core:CustomData key="mode" value="new" />
                                            </f:customData>
                                            <f:header>
                                                <card:Header
                                                    title="Создать нового пользователя"
                                                    subtitle="Начать с чистого листа"
                                                    iconSrc="sap-icon://add-employee"
                                                    statusText="{= ${NewUser>/CreationMode} === 'new' ? 'Выбрано' : '' }" />
                                            </f:header>
                                            <f:content>
                                                <Text text="Выберите этот вариант, чтобы заполнить все данные для нового пользователя вручную." class="sapUiSmallMargin"/>
                                            </f:content>
                                        </f:Card>

                                        <f:Card class="sapUiSizeCompact" press="onSelectCreationMode">
                                            <f:customData>
                                                <core:CustomData key="mode" value="copy" />
                                            </f:customData>
                                            <f:header>
                                                <card:Header
                                                    title="Создать на основе существующего"
                                                    subtitle="Использовать другого пользователя как шаблон"
                                                    iconSrc="sap-icon://copy"
                                                    statusText="{= ${NewUser>/CreationMode} === 'copy' ? 'Выбрано' : '' }" />
                                            </f:header>
                                            <f:content>
                                                <VBox class="sapUiSmallMargin">
                                                    <Text text="Этот вариант скопирует данные (например, роли и команды) от выбранного пользователя." />
                                                    
                                                    <VBox visible="{= ${NewUser>/CreationMode} === 'copy' }" class="sapUiSmallMarginTop">
                                                        <Label text="Выберите пользователя для копирования" required="true" />
                                                        <ComboBox
                                                            id="userTemplateSelector"
                                                            width="100%"
                                                            placeholder="Начните вводить имя..."
                                                            items="{path: '/Users'}"
                                                            selectedKey="{NewUser>/TemplateUserID}"
                                                            selectionChange="validateCreationModeStep">
                                                            <core:Item key="{UserID}" text="{FirstName} {LastName} ({Email})"/>
                                                        </ComboBox>
                                                    </VBox>
                                                </VBox>
                                            </f:content>
                                        </f:Card>
                                    </l:Grid>
                                </WizardStep>

                <WizardStep id="UserDetailsStep"
                    title="{i18n>lUserDetails}"
                    validated="true"
                    activate="UserDetailsStepActivate"
                    icon="sap-icon://customer-and-contacts">
                  <f:Card class="sapUiSmallMarginBottom">
                    <f:layoutData>
                      <l:GridData spanM="12" spanL="12" spanXL="12"/>
                    </f:layoutData>
                    <f:content>
                      <l:VerticalLayout width="100%">
                        <l:BlockLayout background="Default">
                          <l:BlockLayoutRow>
                            <l:BlockLayoutCell>
                              <FlexBox alignItems="Center" justifyContent="Center" width="100%" height="100%">
                                <Avatar id="avatarUC" displaySize="Custom" customDisplaySize="15rem" customFontSize="5rem" press="onClickAvatar"/>
                              </FlexBox>
                            </l:BlockLayoutCell>
                            <l:BlockLayoutCell>
<!--                              <Label text="{i18n>tInstance}" visible="{= ${/appParams('UserManagementAdmin')/Value} === 1 || !!${/isSAdmin('X')/isAdminRole} }" showColon="true" class="sapUiTinyMarginTop"/>
                              <s000:Select lookUpEntitySet="jbcommon_base_InstancesText" lookUpSort="InstanceText"
                              lookUpKey="InstanceID" lookUpText="InstanceText" value="{NewUser>/InstanceText}" key="{NewUser>/InstanceID}" noBinding="true"
                              lookUpSearchField="InstanceText" change="selectCompany" visible="{= ${/appParams('UserManagementAdmin')/Value} === 1 || !!${/isSAdmin('X')/isAdminRole} }"/> -->
                              
                              <Label text="{i18n>lEmail}" required="true" showColon="true"/>
                              <Input id="iEmail"
                                  value="{
                                      path: 'NewUser>/Email',
                                      type: '.customEMailType',
                                      constraints : {
                                        minLength: 1,
                                        maxLength: 320
                                      }
                                    }"
                                  valueState="{NewUser>/EmailState}" liveChange="fillingFirstLastName" type="Email"/>

                              <Label text="{i18n>lFirstName}" showColon="true" class="sapUiTinyMarginTop"/>
                              <Input id="iFirstName" valueState="{NewUser>/FirstNameState}" liveChange="FirstNameValidation"
                                      value="{path: 'NewUser>/FirstName',
                                            type : 'sap.ui.model.type.String',
                                            constraints : {
                                              minLength: 1,
                                              maxLength: 60
                                            }
                                          }"/>
                              <Label text="{i18n>lLastName}" showColon="true" class="sapUiTinyMarginTop"/>
                              <Input id="iLastName" valueState="{NewUser>/LastNameState}" liveChange="LastNameValidation"
                                       value="{path: 'NewUser>/LastName',
                                            type : 'sap.ui.model.type.String',
                                            constraints : {
                                              minLength: 1,
                                              maxLength: 60
                                            }
                                          }"/>
                            <!--  <Label text="{i18n>lCompany}" showColon="true" class="sapUiTinyMarginTop"/>
                              <s000:Select lookUpEntitySet="jbproject_base_Companies" lookUpSort="lookUpSort" lookUpImageURL="lookUpImageURL" lookUpIcon="lookUpIcon" lookUpFilter="Language,EQ,EN"
                              lookUpIconColor="lookUpIconColor" lookUpKey="lookUpKey" lookUpText="lookUpText" value="{lookUpText}" icon="{lookUpIcon}" imageURL="{lookUpImageURL}"  iconColor="{iconColor}" noBinding="true"
                              lookUpSearchField="lookUpFilter" change="selectCompany"/> -->
                            
                              
                              <FlexBox renderType="Div" alignItems="Center" visible="{= ${/appParams('UserManagementAdmin')/Value} === 1 || !!${/isSAdmin('X')/isAdminRole} }">
                                <Label text="{i18n>lUserID}" required="{= !${NewUser>/UserIDGenerate}}" showColon="true">
                                  <layoutData>
                                    <FlexItemData growFactor="100" />
                                  </layoutData>
                                </Label>
                                <CheckBox text="{i18n>lGenerate}" selected="{NewUser>/UserIDGenerate}" select="UserDetailsValidation" 
                              visible="true" enabled="{= ${/appParams('UserManagementAdmin')/Value} === 1 || !!${/isSAdmin('X')/isAdminRole}}" >
                                  <layoutData>
                                    <FlexItemData growFactor="1"/>
                                  </layoutData>
                                </CheckBox>
                              </FlexBox>
                              <Input id="iUserID" visible="{= ${/appParams('UserManagementAdmin')/Value} === 1 || !!${/isSAdmin('X')/isAdminRole}}"
                                value="{path: 'NewUser>/UserID',
                                      type : 'sap.ui.model.type.String',
                                      constraints : {
                                        minLength: 10,
                                        maxLength: 128
                                      }
                                    }"
                                enabled="{= !${NewUser>/UserIDGenerate}}"
                                valueState="{NewUser>/UserIDState}" liveChange="UserDetailsValidation" type="Text"/>

                              <FlexBox renderType="Div" alignItems="Center">
                                <Label text="{i18n>lEmployeeID}" required="{= !${NewUser>/EmployeeIDGenerate}}" showColon="true">
                                  <layoutData>
                                    <FlexItemData growFactor="100" />
                                  </layoutData>
                                </Label>
                                <CheckBox text="{i18n>lGenerate}" selected="{NewUser>/EmployeeIDGenerate}" select="UserDetailsValidation" visible="true" enabled="true">
                                  <layoutData>
                                    <FlexItemData growFactor="1" />
                                  </layoutData>
                                </CheckBox>
                              </FlexBox>
                              <Input id="iEmployeeID"
                              value="{path: 'NewUser>/EmployeeID',
                                    type : 'sap.ui.model.type.String',
                                    constraints : {
                                      minLength: 1,
                                      maxLength: 5
                                    }
                                  }"
                              enabled="{= !${NewUser>/EmployeeIDGenerate}}"
                              valueState="{NewUser>/EmployeeIDState}" liveChange="EmployeeIDValidation" type="Text"/>
                            </l:BlockLayoutCell>
                          </l:BlockLayoutRow>
                          <l:BlockLayoutRow>
                            <l:BlockLayoutCell></l:BlockLayoutCell>
                            <l:BlockLayoutCell>
                              <FlexBox renderType="Div" alignItems="Center">
                                <Label text="{i18n>lPassword}" required="{= !${NewUser>/PasswordGenerate}}" showColon="true">
                                  <layoutData>
                                    <FlexItemData growFactor="100" />
                                  </layoutData>
                                </Label>
                                <CheckBox text="{i18n>lGenerate}" selected="{NewUser>/PasswordGenerate}" select="UserDetailsValidation" enabled="true">
                                  <layoutData>
                                    <FlexItemData growFactor="1" />
                                  </layoutData>
                                </CheckBox>
                              </FlexBox>
                              <Input id="iPasswordUC" 
                              value="{path: 'NewUser>/Password',
                                  type : 'sap.ui.model.type.String',
                                  constraints : {
                                    minLength: 8,
                                    maxLength: 32
                                  }
                                }"
                              enabled="{= !${NewUser>/PasswordGenerate}}"
                              valueState="{NewUser>/PasswordState}" liveChange="UserDetailsValidation" type="Password"/>
                              <Label text="{i18n>lPasswordСonfirmation}" required="{= !${NewUser>/PasswordGenerate}}" showColon="true" class="sapUiTinyMarginTop"/>
                              <Input id="iPasswordConfUC" 
                              value="{path: 'NewUser>/PasswordСonfirmation',
                                  type : 'sap.ui.model.type.String',
                                  constraints : {
                                    minLength: 8,
                                    maxLength: 32
                                  }
                                }"
                              enabled="{= !${NewUser>/PasswordGenerate}}"
                              valueState="{NewUser>/PasswordStateСonfirmation}" liveChange="UserDetailsValidation" type="Password"/>
                              <CheckBox text="{i18n>lChangeAfterFirstLogon}" selected="{NewUser>/ChangeAfterFirstLogon}" enabled="true">
                                <layoutData>
                                  <FlexItemData growFactor="1" />
                                </layoutData>
                              </CheckBox>
                              <CheckBox text="{i18n>lSendEmailNotofication}" selected="{NewUser>/SendEmailNotofication}" enabled="true">
                                <layoutData>
                                  <FlexItemData growFactor="1" />
                                </layoutData>
                              </CheckBox>
                            </l:BlockLayoutCell>
                            <l:BlockLayoutCell></l:BlockLayoutCell>
                          </l:BlockLayoutRow>
                        </l:BlockLayout>
                      </l:VerticalLayout>
                    </f:content>
                  </f:Card>
                </WizardStep>
                <WizardStep id="UserRolesStep"
                    title="{i18n>lUserRoles}"
                    validated="true"
                    activate="UserRolesStepActivate"
                    icon=""></WizardStep>
                <WizardStep id="UserTeamsStep"
                    title="{i18n>lUserTeams}"
                    validated="true"
                    activate="UserTeamsStepActivate"
                    icon=""></WizardStep>
                <WizardStep id="UserAppsStep"
                    title="{i18n>lUserApps}"
                    validated="true"
                    activate="UserAppsStepActivate"
                    icon=""></WizardStep>
              </Wizard>
            </content>
            <footer>
              <Bar>
                <contentRight>
                <!--  <Button text="{i18n>btnPrevious}" press="pageFormSelect"/> -->
                  <Button type="Emphasized" text="{i18n>btnCreateUser}" press="pressCreateUser" />
                  <Button text="{i18n>btnCancel}" press="pressCancel"/>
                </contentRight>
              </Bar>
            </footer>
          </Page>
          <Page id="pageUserCreated" showHeader="false">
            <MessagePage showHeader="false"
                 text="{NewUser>/callbackText}"
                 enableFormattedText="true"
                 icon="{NewUser>/callbackIcon}"
                 description="{NewUser>/callbackDescription}">
              <buttons>
                <Button type="Emphasized" text="{i18n>btnCreateUserAgain}" press="pressCancel"/>
                <Button text="{i18n>btnGotoUserManagement}" press="pressGotoUserManagement"/>
              </buttons>
            </MessagePage>
          </Page>
        </pages>
      </NavContainer>
    </App>
  </Shell>
</mvc:View>