TVML - how to modify formTemplate to show "pin entry" - tvos

TVML's formTemplate can easily be adapted to only allow numeric input:
<formTemplate>
<textField keyboardType="numberPad">0000</textField>
<footer>
<button>
<text>${TEXT("Submit")}</text>
</button>
</footer>
</formTemplate>
This gives a page like...
I would like to reduce it even further to only display a "pin entry" screen as shown here:
Is this possible with TVML, without hosting an own UIControl? I have nowhere found any mentioning of changing styles like this. Any idea how to achieve this? Thanks!

Use secure attribute in textField
https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/TVJSAttributes.html#//apple_ref/doc/uid/TP40015064-CH42-SW37
<textField keyboardType="numberPad" secure="true">0000</textField>

What you are referring to is the TVDigitEntryViewController. You can read more about it here:
https://developer.apple.com/design/human-interface-guidelines/tvos/interface-elements/digit-entry-views/
TVDigitEntryViewController
A view controller that enables the user to enter digits, like a passcode, in your app.
https://developer.apple.com/documentation/tvuikit/tvdigitentryviewcontroller

Related

How to have a helper text over the input field in html?

I have the following design:
UI Design
I want an input field like this i.e. having a text like Shipper Name or Contact Number on top of the input field. How can I achieve this in HTML ? I am not able to find it on the internet.
Thank you
you can use material-ui to access these kind of components without having to code it from scratch.
Their TextField looks exactly the same in the image you provided:
https://mui.com/material-ui/react-text-field/
Their documentation you can follow to integrate their library on your project:
https://mui.com/material-ui/getting-started/installation/
Use fieldset and legend
<fieldset><legend>Shipper Name</legend><input type="text"></fieldset>

Angular make entire Handsontable readonly in HTML

I would like to make my Handsontable completely readonly, I have found some solutions on how to make it readonly via a controller but I would like to do the same in the HTML only. So no javascript changes.
<hot-table id="demoTable"
colHeaders="true"
datarows="gridData"
settings="gridPreferences"
height="300">
<!-- BasicData -->
<hot-column data="row_id" title="'ID'" type="'text'"></hot-column>
Here is an example column in the table, is it possible to make it readonly right here?
You can make individual hot-columns read only by adding the attribute read-only
<hot-column data="row_id" title="'ID'" type="'text'" read-only></hot-column>
---------------------------------------------------------^
The attribute isn't documented well but example usage can be found in the plugin's README.

How to make a angucomplete-alt tag 'required' in a form

I am using angucomplete-alt in many places of my web application (in forms), but i cant make the autocomplete fields as a 'required' field, even thought i've used the 'field-required' attribute.
angucomplete-alt#sectorSuggested(field-required= true,placeholder='Search sectors', local-data='sectors', selected-object='onSectorSelected', search-fields='Sector', pause='300', minlength='1', title-field='Sector',input-class="form-control form-control-small", name='sector')
how do i make it required field, please help :)
Going off of the documentation and examples I can see here, it looks like the attribute should be
field-required="true"
In the above example, his element looks like this:
<div angucomplete-alt="" id="ex8" placeholder="Search countries" pause="100" selected-object="countrySelected8" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight" field-required="true" class="ng-isolate-scope">
Additionally, if you have many required fields, his documentation states:
Set custom class name for required. Unique class names need to be set
when you have multiple directives to validate
You can do this, using the field-required-class attribute.
Taken from here
you can use field-required = "true"
and it should work fine.

HTML/CSS form field with suggestion

What is it called or where can I find code for placing a 'suggestion' or grayed out text in a form field box that doesn't get pass as a value. I know i can prepopulate it, but want to use it to only provide guidance. Example, box that says " "
The terminology you're referring to is called a watermark.
There are many existing Javascript solutions written for this already, like this one.
JavaScript will do this. I've used the jQuery framework, for example:
Setting the value:
$('#comment_box').val('Optional comment..');
On click, removing the value:
$('#comment_box').val('');
On submit:
if (comment == 'Optional comment..'){
comment = '';
}
And submit your comment. I've left out the functions here but you can get an idea.
HTML5 has a placeholder attribute supported by many modern browsers.
(But alas not MSIE.)
The above-linked article explains how to test for support and implement a javascript fallback.
use
<input type=text disabled value='...'/>
(disabled wont pass the values, whereas readonly will pass the value)
I think what you are referring to is a watermark
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx
or
there are jquery defaultvalue plugins

HTML Submit-button: Different value / button-text?

I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload