SAPUI5 Panels - Controlling position of content

up vote
0
down vote

favorite

I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'

The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.

However, when I click on the Next Category (Production Area), I need to the page to scroll back up to the first question in the Category, or maybe even just display the selected category at the top of the page.

Is this possible?

Currently, the user has to continually scroll back if when they select the next Category.

enter image description here

asked Nov 5 at 13:16

Adam Harkus

276320

I don't think there is any "ui5-out-of-the-box" solution for your problem, but I guess you can use css-anchors. React to the open-event of the panel and navigate to the corresponding anchor of the panel.
– luuksen
Nov 5 at 14:57

You could try to use the wizardstep control. This provides the posibility to go to the next and previous step if i'm correct. And it scrolls to the position of that step. sapui5.hana.ondemand.com/#/api/sap.m.WizardStep
– Joey De Laat
Nov 5 at 14:59

css anchors sounds good. Could you provide an example?
– Adam Harkus
Nov 5 at 16:28

try this: set fokus to first column when any column is clicked, since the fokus is set on the very top the screen should also scroll there on its own
– Erch
Nov 6 at 6:29

add a comment |

up vote
0
down vote

favorite

I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'

The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.

Is this possible?

Currently, the user has to continually scroll back if when they select the next Category.

enter image description here

asked Nov 5 at 13:16

Adam Harkus

276320

I don't think there is any "ui5-out-of-the-box" solution for your problem, but I guess you can use css-anchors. React to the open-event of the panel and navigate to the corresponding anchor of the panel.
– luuksen
Nov 5 at 14:57

You could try to use the wizardstep control. This provides the posibility to go to the next and previous step if i'm correct. And it scrolls to the position of that step. sapui5.hana.ondemand.com/#/api/sap.m.WizardStep
– Joey De Laat
Nov 5 at 14:59

css anchors sounds good. Could you provide an example?
– Adam Harkus
Nov 5 at 16:28

try this: set fokus to first column when any column is clicked, since the fokus is set on the very top the screen should also scroll there on its own
– Erch
Nov 6 at 6:29

add a comment |

up vote
0
down vote

favorite

I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'

The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.

Is this possible?

Currently, the user has to continually scroll back if when they select the next Category.

enter image description here

asked Nov 5 at 13:16

Adam Harkus

276320

I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'

The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.

Is this possible?

Currently, the user has to continually scroll back if when they select the next Category.

enter image description here

scroll sapui5 panel onfocus

asked Nov 5 at 13:16

Adam Harkus

276320

asked Nov 5 at 13:16

Adam Harkus

276320

asked Nov 5 at 13:16

Adam Harkus

276320

asked Nov 5 at 13:16

Adam Harkus

276320

asked Nov 5 at 13:16

Adam Harkus

276320

I don't think there is any "ui5-out-of-the-box" solution for your problem, but I guess you can use css-anchors. React to the open-event of the panel and navigate to the corresponding anchor of the panel.
– luuksen
Nov 5 at 14:57

You could try to use the wizardstep control. This provides the posibility to go to the next and previous step if i'm correct. And it scrolls to the position of that step. sapui5.hana.ondemand.com/#/api/sap.m.WizardStep
– Joey De Laat
Nov 5 at 14:59

css anchors sounds good. Could you provide an example?
– Adam Harkus
Nov 5 at 16:28

try this: set fokus to first column when any column is clicked, since the fokus is set on the very top the screen should also scroll there on its own
– Erch
Nov 6 at 6:29

add a comment |

I don't think there is any "ui5-out-of-the-box" solution for your problem, but I guess you can use css-anchors. React to the open-event of the panel and navigate to the corresponding anchor of the panel.
– luuksen
Nov 5 at 14:57

You could try to use the wizardstep control. This provides the posibility to go to the next and previous step if i'm correct. And it scrolls to the position of that step. sapui5.hana.ondemand.com/#/api/sap.m.WizardStep
– Joey De Laat
Nov 5 at 14:59

css anchors sounds good. Could you provide an example?
– Adam Harkus
Nov 5 at 16:28

try this: set fokus to first column when any column is clicked, since the fokus is set on the very top the screen should also scroll there on its own
– Erch
Nov 6 at 6:29

I don't think there is any "ui5-out-of-the-box" solution for your problem, but I guess you can use css-anchors. React to the open-event of the panel and navigate to the corresponding anchor of the panel.
– luuksen
Nov 5 at 14:57

You could try to use the wizardstep control. This provides the posibility to go to the next and previous step if i'm correct. And it scrolls to the position of that step. sapui5.hana.ondemand.com/#/api/sap.m.WizardStep
– Joey De Laat
Nov 5 at 14:59

css anchors sounds good. Could you provide an example?
– Adam Harkus
Nov 5 at 16:28

try this: set fokus to first column when any column is clicked, since the fokus is set on the very top the screen should also scroll there on its own
– Erch
Nov 6 at 6:29

add a comment |

3 Answers
3

active

oldest

votes

up vote
0
down vote

you can try to use this control instead which suits your needs

https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout

answered Nov 6 at 15:01

jasbir

1167

Wizards and Object pages don't really fit the use-case. It's questions stacked vertically, and expandable rather than steps.
– Adam Harkus
Nov 6 at 15:14

add a comment |

up vote
0
down vote

You can achieve it using scrollToElement()

var oPage = sap.ui.getCore().byId("pageId");//you page ID

var oList = sap.ui.getCore().byId("ListId");//element ID to which it has to scroll

if ( oPage && oList )

  oPage.scrollToElement(oList, 1000);

Execute the above code inside the panel event expand

edited Nov 7 at 11:20

answered Nov 7 at 10:04

inizio

921512

add a comment |

up vote
0
down vote

After trying everything, this is what worked for me.

onExpand: function (oEvent) {



            if (oEvent.getParameters().expand) {

                var focusID = oEvent.getParameter("id");

                var elmnt = sap.ui.getCore().byId(focusID);

                elmnt.getDomRef().scrollIntoView(true);

answered Nov 7 at 12:05

Adam Harkus

276320

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53155169%2fsapui5-panels-controlling-position-of-content%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
0
down vote

you can try to use this control instead which suits your needs

https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout

answered Nov 6 at 15:01

jasbir

1167

Wizards and Object pages don't really fit the use-case. It's questions stacked vertically, and expandable rather than steps.
– Adam Harkus
Nov 6 at 15:14

add a comment |

up vote
0
down vote

you can try to use this control instead which suits your needs

https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout

answered Nov 6 at 15:01

jasbir

1167

Wizards and Object pages don't really fit the use-case. It's questions stacked vertically, and expandable rather than steps.
– Adam Harkus
Nov 6 at 15:14

add a comment |

up vote
0
down vote

you can try to use this control instead which suits your needs

https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout

answered Nov 6 at 15:01

jasbir

1167

you can try to use this control instead which suits your needs

https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout

answered Nov 6 at 15:01

jasbir

1167

answered Nov 6 at 15:01

jasbir

1167

answered Nov 6 at 15:01

jasbir

1167

answered Nov 6 at 15:01

jasbir

1167

Wizards and Object pages don't really fit the use-case. It's questions stacked vertically, and expandable rather than steps.
– Adam Harkus
Nov 6 at 15:14

add a comment |

Wizards and Object pages don't really fit the use-case. It's questions stacked vertically, and expandable rather than steps.
– Adam Harkus
Nov 6 at 15:14

Wizards and Object pages don't really fit the use-case. It's questions stacked vertically, and expandable rather than steps.
– Adam Harkus
Nov 6 at 15:14

add a comment |

up vote
0
down vote

You can achieve it using scrollToElement()

var oPage = sap.ui.getCore().byId("pageId");//you page ID

var oList = sap.ui.getCore().byId("ListId");//element ID to which it has to scroll

if ( oPage && oList )

  oPage.scrollToElement(oList, 1000);

Execute the above code inside the panel event expand

edited Nov 7 at 11:20

answered Nov 7 at 10:04

inizio

921512

add a comment |

up vote
0
down vote

You can achieve it using scrollToElement()

var oPage = sap.ui.getCore().byId("pageId");//you page ID

var oList = sap.ui.getCore().byId("ListId");//element ID to which it has to scroll

if ( oPage && oList )

  oPage.scrollToElement(oList, 1000);

Execute the above code inside the panel event expand

edited Nov 7 at 11:20

answered Nov 7 at 10:04

inizio

921512

add a comment |

up vote
0
down vote

You can achieve it using scrollToElement()

var oPage = sap.ui.getCore().byId("pageId");//you page ID

var oList = sap.ui.getCore().byId("ListId");//element ID to which it has to scroll

if ( oPage && oList )

  oPage.scrollToElement(oList, 1000);

Execute the above code inside the panel event expand

edited Nov 7 at 11:20

answered Nov 7 at 10:04

inizio

921512

You can achieve it using scrollToElement()

var oPage = sap.ui.getCore().byId("pageId");//you page ID

var oList = sap.ui.getCore().byId("ListId");//element ID to which it has to scroll

if ( oPage && oList )

  oPage.scrollToElement(oList, 1000);

Execute the above code inside the panel event expand

edited Nov 7 at 11:20

answered Nov 7 at 10:04

inizio

921512

edited Nov 7 at 11:20

answered Nov 7 at 10:04

inizio

921512

answered Nov 7 at 10:04

inizio

921512

answered Nov 7 at 10:04

inizio

921512

add a comment |

up vote
0
down vote

After trying everything, this is what worked for me.

onExpand: function (oEvent) {



            if (oEvent.getParameters().expand) {

                var focusID = oEvent.getParameter("id");

                var elmnt = sap.ui.getCore().byId(focusID);

                elmnt.getDomRef().scrollIntoView(true);

answered Nov 7 at 12:05

Adam Harkus

276320

add a comment |

up vote
0
down vote

After trying everything, this is what worked for me.

onExpand: function (oEvent) {



            if (oEvent.getParameters().expand) {

                var focusID = oEvent.getParameter("id");

                var elmnt = sap.ui.getCore().byId(focusID);

                elmnt.getDomRef().scrollIntoView(true);

answered Nov 7 at 12:05

Adam Harkus

276320

add a comment |

up vote
0
down vote

After trying everything, this is what worked for me.

onExpand: function (oEvent) {



            if (oEvent.getParameters().expand) {

                var focusID = oEvent.getParameter("id");

                var elmnt = sap.ui.getCore().byId(focusID);

                elmnt.getDomRef().scrollIntoView(true);

answered Nov 7 at 12:05

Adam Harkus

276320

After trying everything, this is what worked for me.

onExpand: function (oEvent) {



            if (oEvent.getParameters().expand) {

                var focusID = oEvent.getParameter("id");

                var elmnt = sap.ui.getCore().byId(focusID);

                elmnt.getDomRef().scrollIntoView(true);

answered Nov 7 at 12:05

Adam Harkus

276320

answered Nov 7 at 12:05

Adam Harkus

276320

answered Nov 7 at 12:05

Adam Harkus

276320

answered Nov 7 at 12:05

Adam Harkus

276320

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk