I have a sap.m.Dialog form:
When I click on «Forgot password?», I show a hidden sap.m.Input field:
The problem is that the extended form is now much bigger then the original one.
I've tried to figure out why but can't find a source of the issue.
A click on the «Forgot password?» calls onResetPasswordForm:
onResetPasswordForm() {
// hide the reset password form
if (oView.byId("resetPasswordUsername").getVisible()) {
oView.byId("username").focus();
oView.byId("resetPasswordUsername").setVisible(false);
oView.byId("btnResetPassword").setVisible(false);
oView.byId("resetPasswordUsername").setValue("");
// show the reset password form
} else {
oView.byId("resetPasswordUsername").focus();
oView.byId("resetPasswordUsername").setValue("");
oView.byId("resetPasswordUsername").setVisible(true);
oView.byId("btnResetPassword").setVisible(true);
}
}
XML-template:
<core:FragmentDefinition
xmlns:core = "sap.ui.core"
xmlns = "sap.m">
<Dialog
id = "authDialog"
contentWidth = "300px"
title = "{i18n>AUTH_DIALOG_DIALOG_TITLE}"
type = "Message"
escapeHandler = ".escapeHandler">
<Label
labelFor = "username"
text = "{i18n>AUTH_DIALOG_LAB_USERNAME}" />
<Input
id = "username"
liveChange = ".onLiveChange"
placeholder = "{i18n>AUTH_DIALOG_PH_USERNAME}"
type = "Text" />
<Label
labelFor = "password"
text = "{i18n>AUTH_DIALOG_LAB_PASSWORD}" />
<Input
id = "password"
liveChange = ".onLiveChange"
placeholder = "{i18n>AUTH_DIALOG_PH_PASSWORD}"
type = "Password" />
<Link
id = "showHideResetPasswordForm"
text = "{i18n>AUTH_DIALOG_PASSWORD_FORGOT}"
class = "authFormHelperText"
press = ".onResetPasswordForm" />
<Input
id = "resetPasswordUsername"
visible = "false"
liveChange = ".onLiveChange"
placeholder = "{i18n>AUTH_DIALOG_PH_USERNAME}"
type = "Text" />
<beginButton>
<Button
id = "btnResetPassword"
enabled = "false"
visible = "false"
press = ".onResetPassword"
text = "{i18n>AUTH_DIALOG_BTN_RESET_PASSWORD}"
type = "Emphasized" />
</beginButton>
<endButton>
<Button
id = "btnLogin"
enabled = "false"
press = ".onPressLogin"
text = "{i18n>AUTH_DIALOG_BTN_SUBMIT}"
type = "Emphasized" />
</endButton>
</Dialog>
</core:FragmentDefinition>
How can I show a hidden sap.m.Input without changing the initial sap.m.Dialog sizes?
You can control the content size with the properties contentWidth and contentHeight.
Update after the comment:
but more interesting is the reason why does the showing of extra [content] leads to change the dialogue window size?
That's probably the native behavior of Blink (Chromium's layout engine). If an additional HTMLElement needs to be rendered and the Dialog's <div> element does not specify the width explicitly (getContentWidth() returning an empty value), the sizes of the <div> grow automatically along with the content.
According to this comment, other browsers behave differently. So the Dialog tries to "fix" it in that case.
Try to set the height of Dialog with vh. Hope that will work.
Related
ComboBox is not showing state like Error, Warning with highlight around the borders. But it does change the state. For example, if it is error state, and if I try to enter new value in combobox, it will show that "invalid Entry" tip near the box. But the box borders are never highlighted in red. Below is the code:
XML.view
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">
<Dialog id......>
<ComboBox id="combo1" change="cChanged" items="{path: '/results'}">
<items>
<core:Item key="{ID}" text="{Name}"/>
</items>
</ComboBox>
</Dialog>
Controller.js
cChanged: function(oEvent) {
var newval = oEvent.getParameter("newValue");
var key = oEvent.getSource().getSelectedItem();
if (newval !== "" && key === null) {
sap.ui.getCore().byId("combo1").setValueState("Error");
oEvent.getSource().setValue("");
sap.m.MessageToast.show("Please select from existing IDs")
flag = false;
} else {
oEvent.getSource().setValueState('None');
}
You can also access combo1 control instance by using oEvent.getSource() event OR use byId() from the sap.ui.core.Fragment class and not sap.ui.getCore().byId()
Also, if you are writing a logic only to validate if what the user input in the combobox is a valid item, consider replacing your ComboBox by the sap.m.Select control.
Both ComboBox and Select has same look and feel, but Select does not allow a manual input. It can also have an empty option if you use the property forceSelection
Right Now I'm creating An application. Here we have Help sections. Usually, Giant applications like Youtube,NetFlix and Vimeo are not showing their Help section in their App. But In our Case, We wanted to show the Help portions. So it will have some questions. But From the design,It is the same like Accordion effect.
I know It is very hard to do it. I don't know, how to to get focus if I use simple Labels.
I have tried some different methods.
Method 1 : By using Label one by one. So I can hide and show by using visible property.
Doubt : So how can I get the focus? so If there are 20 questions, How can I set focus?
Method 2 : By using LabelList. So it has autofocus.
Doubt : So how can I hide and show contents by using LabelGroup? I think, there is no visible property.
And finally, I used an Animation.
Please visit this image
For this, I have used Vector2DFieldInterpolator Animation
And Here is my Code.
<component name = "AnimationV2DExample" extends = "Group" >
<children>
<Rectangle
width = "900"
height = "330"
color = "0x10101000" >
<Label
id="QuestionLabel"
text="What is this?"/>
<Rectangle
id="answer1rect"
width = "900"
height = "330"
color = "0x10101000" >
<Label
id="AnswerLabel"
text="This is a Roku App."
visible="false"/>
</Rectangle>
<Label
id="QuestionLabel1"
text="What is that?"/>
<Rectangle
id="answer2rect"
visible = "false"
color = "0x10101000" >
<Label
id="AnswerLabel"
text="This is a Roku App."
visible="false"/>
</Rectangle>
<Animation
id = "exampleVector2DAnimationrev"
duration = "7"
easeFunction = "outExpo" >
<Vector2DFieldInterpolator
id = "exampleVector2D"
key = "[ 1, 0 ]"
keyValue = "[ [0.0,50.0], [0.0,0.0] ]"
fieldToInterp = "AnswerLabel.translation" />
</Animation>
</Rectangle>
</children>
</component>
And Here is Brightscript
sub init()
examplerect = m.top.boundingRect()
centerx = (1280 - examplerect.width) / 2
centery = (720 - examplerect.height) / 2
m.top.translation = [ centerx, centery ]
m.revanimation = m.top.findNode("exampleVector2DAnimationrev")
m.answer = m.top.findNode("AnswerLabel")
m.answerRec = m.top.findNode("answer1rect")
m.qustion1 = m.top.findNode("QuestionLabel1")
m.qustion1.translation = [40,100]
m.answer.translation = [50,50]
m.question = m.top.findNode("QuestionLabel")
end sub
function onKeyEvent(key as String, press as Boolean) as Boolean
handled = false
if press then
if(key = "OK" AND m.question.id = "QuestionLabel")
m.answer.visible = true
m.revanimation.repeat = false
m.revanimation.control = "start"
handled = true
end if
end if
return handled
end function
So How can I do a successful Accordion with this? Am I going in a right way? Or If it is not possible, Please suggest me the better way.
I have created a simple form with three radio buttons and one submit button.
The radio buttons have integers as value
Value of Radio Button #1: 40
Value of Radio Button #2: 41
Value of Radio Button #3: 42
If the user selects radio button #1 for example and presses the submit button, then he should be redirected to the page with ID 40.
How can i find out which of the radio buttons is selected and get the value of it? I tried it like this GP:assistent:group1
Whole form configuration:
title = test
enctype = application/x-www-form-urlencoded
method = post
prefix = assistent
confirmation =
postProcessor {
1 = redirect
1 {
destination = GP:assistent:group1
}
}
10 = RADIOGROUP
10 {
class = fieldset-subgroup
legend {
value = Nächste Schritte
}
name = group1
10 = RADIO
10 {
checked = checked
type = radio
value = 40
label {
value = Ich habe ein Problem mit X
}
}
20 = RADIO
20 {
type = radio
value = 41
label {
value = Ich habe ein Problem mit Y
}
}
30 = RADIO
30 {
type = radio
value = 42
label {
value = Ich habe ein Problem mit Z
}
}
}
20 = SUBMIT
20 {
type = submit
name = 6
value = Weiter
}
one solution is to add your Form and grep the GP Parameter. "LOAD_REGISTER" like
page.1=TEXT
page.1.value (
<form method="get" action="">
<ul>
<li><input type="radio" name="myid" value="20" /></li>
<li><input type="radio" name="myid" value="30" /></li>
</ul>
<input type="submit" value="Dummy text">
</form>
)
[globalVar = GP:myid >0]
page.jsInline {
1234 = TEXT
#1234.dataWrap = alert("redirect to:'Location: index.php?id={GP:nameradio}'");
1234.value = window.location.assign("index.php?id={GP:myid}")
1234.insertData=1
}
#or with config.additionalHeaders
[global]
keep things simple.
regards
Pete
I want to check my angular form validity with a little tweak,
I have a form builded dynamically with directives involved, Now the form has more than one page to it, so i play with ng-hide/ng-show when i move from page to page...
All i want to do is to check the validity of the first chunk of form inputs, for example:
I have 3 pages, 3 questions in every 'page', before the user can go to the next page, it should check for validation on the three inputs, and only than! he can move to the next one...
on my form tag i have 'novalidate' so i must do all the validations myself...
What you're after is ng-form
You can't nest HTML <form></form> tags but you can with ng-form to split your form into sections.
i.e.
<form name="myForm">
<ng-form name="subForm1">
<input name="txtField1" type="text" ng-model="Field1" ng-maxlength="50" required>
</ng-form>
<ng-form name="subForm2">
<input name="txtField2" type="text" ng-model="Field2" ng-maxlength="10" required>
</ng-form>
<button type="button1" ng-disabled="subForm1.$invalid" ng-click="doSomething() ">Button 1</button>
<button type="button1" ng-disabled="subForm2.$invalid" ng-click="doSomething()" >Button 2</button>
<button type="button3" ng-disabled="myForm.$invalid" ng-click="doSomething()" >Button 3</button>
</form>
In this instance button1 and button2 are disabled on parts of the form where as button3 is disabled based on the whole forms input
Source: https://docs.angularjs.org/api/ng/directive/ngForm
You can use the Angular's form element property $dirty, or you could check if the element you want to validate has the class ng-dirty.
If you'd like, read more here, it explains how to use and check this.
Angular JS has some pretty features which you can take advantage of especially the class .ng-valid and .ng-invalid. As the user fills your form, angular dose a real time update on the state of form fields by changing the classList to correspond to the current state of the form.
Any for field that is has been altered and does not pass the Angular validation will have a class .ng-invalid well all classes that passed the validation will have .ng-valid. While ng-pristine indicates that the form have not been modified ng-dirty tells you that the form has been modified. Not that ng-pristine and ng-dirty cannot be used to ascertain the validity of the field.
Meanwhile for your case I have created a CodePen
angular.module("paged", [])
.controller("FormCtrl", function($scope) {
$scope.form = {page: 1};
$scope.canShow = function(i) {
return (i === $scope.form.page);
};
$scope.submit = function(form) {
alert("Form Submitted", form);
};
$scope.gotoPage = function(pageTo) {
var show = false;
var els = document.getElementsByTagName("input"); //Just with input only to keep it simple
for (var i = 0; i < els.length; i++) {
if (els[i].hasAttribute("data-page") && els[i].getAttribute("data-page") == pageTo - 1) {
if (els[i].classList.contains("ng-invalid")) {
show = false;
break;
}
}
show = true;
}
if (show) {
$scope.form.page = pageTo;
if (pageTo == 4) {
$scope.submit($scope.form);
}
}
}
});
to show you how this can done. As someone will rightfully say, there may ways to kill a rat. I think this is one of them
I have these three frames on a website.
<frame scrolling="AUTO" src="../../vix/thalada/Rangasamy?MokkaKumuta1234567" name="AAN">
<frame scrolling="AUTO" src="../../vix/thalada/Rangasamy?MokkaK****13245678" name="BAN">
<frame scrolling="AUTO" src="../../vix/thalada/Rangasamy?MokkaK****85234175" name="CAN">
This is how it goes:
Set oIE = CreateObject("InternetExplorer.application")
oIE.Visible = True
oIE.navigate ("https://ec.rcuwebportal.au.eds.com/cics/r1cb/rm0p00ba?cb246")
oIE.Document.getElementsByTagName("a").item(0).Click // This works and it clicks on a image button in the frame named AAN. Fine
Next when I tried to access another text box that is present in the frame named BAN , I got the object not found error. Obviousy, because I'm still the frame AAN , but the element belongs to frame BAN.
Below is the textbox that is present in the frame named BAN.
<input type="text" maxlength="30" size="30" value=" " name="BAFREENAME"></input>
How do I access the form control on this frame? Any ideas?
Appreciate your help.
You can access all elements off of the frames by first, iterating through the frames, then referencing their contentWindow.document.
Dim oIE, aHTML, oIFrames, frame, i, obj, ifHTML: i = 1
Set oIE = CreateObject("InternetExplorer.application")
oIE.Visible = True
'This page must be remote...
oIE.navigate ("http://your/website...")
'local websites (file://) will return access denied on IFRAME/Frame Content viewing.
Do
Loop While oIE.ReadyState < 4 And oIE.Busy
Set aHTML = oIE.document
Set iframes = aHTML.getElementsByTagName("frame")
For Each frame In iframes
Set inputs = frame.contentwindow.document.getElementsByTagName("input")
For Each obj In inputs
If obj.className = "BAFREENAME" Then
'MsgBox "found BAFREENAME in frame:" & i
End If
Next
i = i + 1
Next
'MsgBox "done"