DecSoft Soporte - ShowView and scroll to bottom?

Is it possible to call ShowView and, when the complete view has been loaded, scroll to its bottom?

Background for this question:

I have a menu list where each entry loads another view. When I go back from that view to the menu, I have often to scroll manually down to resume the position before.

DecSoft

Hello Harald,

I think we can resume what to do with this: 1º Save the "scrollTop" of the element that we wanted, and then go to another view. 2º When the first view is shown, look at the value of the saved "scrollTop", and, goto it if we have a value different than zero, for example.

Based in the app sample that I prepare before in this thread, I modify it a bit in order to do what I describe above. Please, take a look Harald: copy the below code into a new file and save it as "MyApp.ab", then, open it with DecSoft App Builder and run it.

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.28">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Icon></Icon>
    <Width>320</Width>
    <Height>480</Height>
    <Scale>1</Scale>
    <Zoom>1</Zoom>
    <Theme>Default</Theme>
    <Themes></Themes>
    <Plugins></Plugins>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <LanguageCode>en</LanguageCode>
    <TextDirection>ltr</TextDirection>
    <Created>2019-04-03T14:01:48.472</Created>
    <Modified>2019-04-12T19:54:51.151</Modified>
    <BuildNumber>0</BuildNumber>
    <AutoBuildNumber>0</AutoBuildNumber>
    <InlineCSS>
      <![CDATA[#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    z-index: 99999;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}]]>
    </InlineCSS>
    <ReadyEvent>
      <![CDATA[
SetVar "[PreviousScrollTop]" "0" "Number"
]]>
    </ReadyEvent>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Android />
      <IOS />
      <Windows />
      <Phonegap>
        <CLIVersion>8.0.0</CLIVersion>
      </Phonegap>
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS

  $('.appView').append('<span id="return-to-top"><i class="fas fa-arrow-circle-up"></i></span>');

  $('.appView').scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
  });

  $('#return-to-top').click(function() {      // When arrow is clicked
    $('.appView').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
  });

  if (window.App.RootScope.PreviousScrollTop != 0) {
    $('.appView').animate({
      scrollTop : window.App.RootScope.PreviousScrollTop
    }, 500);
  }

EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="3001">
          <Name>Input1</Name>
          <Top>40</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input2</Name>
          <Top>88</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input3</Name>
          <Top>136</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input4</Name>
          <Top>184</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input5</Name>
          <Top>232</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input6</Name>
          <Top>280</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input7</Name>
          <Top>328</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input8</Name>
          <Top>376</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input9</Name>
          <Top>424</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input10</Name>
          <Top>472</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input11</Name>
          <Top>520</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input22</Name>
          <Top>568</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input23</Name>
          <Top>616</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="2001">
          <Name>Button19</Name>
          <Top>664</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Go to view 2]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
          <ClickEvent>
            <![CDATA[
StartJS

  window.App.RootScope.PreviousScrollTop = document.getElementById('View1').scrollTop;

EndJS

ShowView "View2"
]]>
          </ClickEvent>
        </Control>
        <Control Role="6002">
          <Name>Label1</Name>
          <Top>11</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>24</Height>
          <Text>Scrollable inputs</Text>
        </Control>
        <Control Role="1001">
          <Name>PaddingBottomContainer</Name>
          <Top>712</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>16</Height>
        </Control>
      </Controls>
    </View>
    <View>
      <Name>View2</Name>
      <Controls>
        <Control Role="2001">
          <Name>Button1</Name>
          <Top>32</Top>
          <Left>32</Left>
          <Width>256</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Back to view 1]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
          <ClickEvent>
            <![CDATA[
ShowView "View1"]]>
          </ClickEvent>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.28 (4/1/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

The "saved scroll top" variable is defined in the app's Ready event with a zero value. When we click the "Go to view 2" button (in the first view) we store the "scroll top" of the element that we wanted (the view itself in this case) in the referred variable. Then, look at the Show event of the first view: we check the value of the referred variable, and, if it's different than zero, we apply the scroll over the view.

Purchase one or more licenses of our products if they are useful to you!

Harald Schneider

Perfect! Works like a charm!

Thank you again for your excellent support!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.