In my project, I'm using Cybersource Flex Microform for Credit Card validations, but unable to mask the entered number on blur or key-up.
I am using the 0.4.0 version of the Flex Microform API and in the options object, I'm giving inputType: "password".
window.FLEX.microform(
{
keyId: kid,
keystore: keystore,
container: '#cardNumber-container',
label: '#cardNumber-label',
styles: {
input: {
'font-size': '16px'
}
},
encryptionType: 'rsaoaep256',
inputType: 'password'
},
function(setupError, microformInstance) {
// credit card on blur event functionality
}
)
Still in the field, the input type is coming as the default "tel", but not as "password".
Related
I'm using AWS cognito and amplify in my vue js application. Everything is working fine with pre-defined fields.
I've added the custom fields in AWS user pool attributes section. Those newly added fields are not reflecting in UI.
Here is my code for amplify config and custom fields.
HTML Code:
<amplify-authenticator>
<amplify-sign-up
slot="sign-up"
header-text="My Project Sign-Up"
submit-button-text="Register"
:formFields="formFields"
></amplify-sign-up>
</amplify-authenticator>
Custom Fields JSON
formFields: [
{ type: 'username' },
{ type: 'password' },
{ type: 'email', inputProps: { required: true, autocomplete: 'username' } },
{ type: 'phone_number' },
{ type: 'custom:name' },
]
Result form
Custom fields are not coming in the form. Can some one please help me to solve this issue?
The issue appears to be related to Stencil. See this discussion.
The solution suggested is to change formFields to formFields.prop.
E.g.
<amplify-authenticator>
<amplify-sign-up
slot="sign-up"
header-text="My Project Sign-Up"
submit-button-text="Register"
:formFields.prop="formFields"
></amplify-sign-up>
</amplify-authenticator>
This worked for me using Vue 2.
I have a Vue app that generates as many forms as the user likes. Each form represent a 'risk' in this 'risks' data model:
var app = new Vue({
el: '#app',
data: {
risks: [
{
'risk_name': '', 'fields': [{'field': '', 'type': ''}], 'errors':[]
}
],
},
Then I send the 'risks' to a post API request. Then I make a second get request that brings back a template with the processed data as JSON. So far so good. However, how do I render the template (new page) with this data.
This is how I receive the data:
Submit() {
if (this.checkValidity()) {
console.info(this.risks)
axios.post('risks', this.risks)
.then(function(response) {
axios.get('risks')//This gets the data back
})
.catch(function(error) {
alert('This Error occured: ' + error)
})
}
},
This is the GET API call that I called above (Flask):
#app.route('/risks', methods=['GET'])
def getInsurancePolicyForm():
risks = getTables(app.metadata)
return render_template('form.html', risks=risks)
I can see the rendered template in developer tools, but the page the user sees remains the same.
Your page should be focussed on the risks object instead of the response from the API call.
When the user selects options, add them to the risks data object so your risks object looks like:
risks: [
{
'risk_name': '', 'fields': [{'field': 'My Field', 'type': 'text', modelToHoldData: ''}], 'errors':[]
}
]
Then, when the user clicks on Submit, by all means send it to the API but you don't need a template from there, use the risks object like so (remembering to hide the form they've just chosen their fields with):
<div v-for="risk in risks">
<label>{{risk.field}}</label>
<input type="text" v-if="risk.type === 'text'" v-model="risk.modelToHoldData" />
</div>
You can adjust the above example to add as many variations of the example as you allow the user to select.
Once all this is done and you need access to the data the user enters, you can loop through the array again and just access the modelToHoldData prop on each of the risks.
I'm utilizing the rally standard report to generate an iteration burndown, but given that i want post this on a wiki/web page. Looking for a way to point this to a project/subproject so that I can have several instances of this on one page. I tried it via context, but I'm obviously missing something. The code is below, any guidance/recommendation would be greatly appreciated!
Thanks!
Mark
Ext.create('Ext.Container', {
context : {
workspace : 'https://rally1.rallydev.com/slm/webservice/v2.0/workspace/50876644101',
project : 'https://rally1.rallydev.com/slm/webservice/v2.0/project/50891172431'
},
items: [{
xtype: 'rallystandardreport',
width: 750,
height: 500,
reportConfig: {
report: 'IterationBurndown',
subchart: 'hide',
title : 'IterationBurndown',
project : 'Harrier'
}
}],
renderTo: Ext.getBody().dom
});
You're on the right track. The StandardReport component was one of the earliest ones written and so it doesn't quite follow the standard ability to pass in a context like most of the rest of the SDK.
You're on the right path with the project config above- it just needs to be the ref of the project you're targeting rather than the name, and it goes right on the root component config instead of beneath reportConfig. There are also projectScopeUp and projectScopeDown.
There's also a full example here: https://help.rallydev.com/apps/2.0/doc/#!/example/standard-report
{
xtype: 'rallystandardreport',
width: 750,
height: 500,
reportConfig: {
report: 'IterationBurndown',
subchart: 'hide',
title : 'IterationBurndown'
},
project: '/project/12345',
projectScopeUp: false,
projectScopeDown: true
}
I begin learn about Sencha Touch 2. So, I have had many problems to ask! ^^ Let's research it.
Now I have a data json like:
{
result: "SUCCESS",
national: [
"Afghanistan",
"Albania",
"Albania",
"Algeria",
"American Samoa",
"Andorra"
]
}
Then, I will load it from url: nation.php file.
How can i load it to My Select Field.??????
Share and Support to me.! Thanks :).
I don't know how to do this in Sencha Architect 2 ( i am not using it).. but still
Instead of asking question without try (I mean you didn't post tried code here), Better you start with Sencha Touch Documentation.
Anyway, you can do it as follows
Model
Ext.define('AppName.model.countries', {
extend : 'Ext.data.Model',
config: {
fields: [
{name: 'name', convert: function(value, record) {
return record.raw;
}}
],
}
});
Store
var myStore = Ext.create("Ext.data.ArrayStore", {
model : 'AppName.model.countries',
proxy: {
type: "ajax",
url : "nation.php",
reader: {
type: 'json',
rootProperty : function(data) {
return data.national;
}
}
},
autoLoad: true
});
Select Field in View
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'selectfield',
store: myStore ,
valueField:'name',
displayField:'name'
}]
});
With Viswa's Support. :) I found this problem - XMLHttpRequest cannot load. Origin is not allowed by Access-Control-Allow-Origin error (browser policy security).
And Sencha Touch document say: " The JsonP proxy is useful when you need to load data from a domain other than the one your application is running on. If your application is running on http://domainA.com it cannot use Ajax to load its data from http://domainB.com because cross-domain ajax requests are prohibited by the browser.
" Also, All we need to do is - "Implement all api in Your Webserver" and Follow JsonP's format code: ( in PHP)
$callback = $_REQUEST['callback'];// check callbackkey
// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');// output data.
//start output
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
If. Using Sencha Touch 2.1, You can use:
Ext.data.JsonP.request({
url: 'http://otherdomain/svn_visaapi/trunk/api/visa_api.php/test_json',
callbackKey: 'callback',
success: function(result) {
console.log(result);
//Your success function here...
}
});
- If, Using Sencha Architect, you can use a Store.proxy.JsonP to call api.
- Read more document Sencha Touch 2.1 to see that.
iam new sencha touch.
Iam doing one project , in that project i need to convert the images to base64 string, iam uploading the image, and iam getting fulll path of image, but iam unable to convert image to base64 string.
plz help me in this issue.
make sure that iam asking in sencha touch
How do you access the files? Where the images are coming from? If they are from the camera or the photo gallery then Phonegap is the best way to get them. Base64 encoding is solved by PG in that case. If you are trying to solve it in pure js then you need to do some more work on it. Sencha doesn't provide functions for base64 encoding. So the best bet if you add some function to your project. There are lots of resources on the web how to do base64 encoding in javascript. E.g. see the discussion here Base64 encoding and decoding in client-side Javascript
The following code snippet helps you for uploading image and get base64 data uri
In your view you should have the following filefield component of sencha touch
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'filefield',
id: 'idfilefieldSample',
name: 'filefieldSample',
accept: 'image'
},
]
}
});
and your controller look like this:
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control:{
'filefield[name=filefieldSample]': {
change: 'onChangefilefield',
},
}
},
onChangefilefield: function(filefield, newData, oldData, eOpts)
{
var filesSelected = Ext.getCmp('idfilefieldSample').getComponent().input.dom.files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var srcData = fileLoadedEvent.target.result;
console.log(srcData);
}
fileReader.readAsDataURL(fileToLoad);
}
},
});