How to use single json file to consume in alpacajs - javascript

I have created a simple form using alpacajs, as per the documentation provided by alpacajs.org we can use properties such as optionsSource, schemaSource, viewSource, dataSource for loading the external json files into our application. But what i need is i need to use only one json file for all these. I mean instead of using all these 3 different properties can i use only one parameter for loading the single json file which comes from the backend. please check my code below..
<html>
<head>
<meta charset="UTF-8">
<title>My Little Alpaca Form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.js"></script>
<!-- typeahead.js https://github.com/twitter/typeahead.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/bloodhound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
<link href="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.css" rel="stylesheet" />
<link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="form1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").alpaca({
"dataSource": "/fulfiller/connector-custom-data.json",
"schemaSource": "/fulfiller/connector-custom-schema.json",
"optionsSource": "/fulfiller/connector-custom-options.json",
"viewSource": "/fulfiller/connector-custom-view.json",
"view": {
"parent": "bootstrap-edit",
"layout": {
"template": "threeColumnGridLayout",
"bindings": {
"requestedfor": "column-1",
"location": "column-2",
"shortdescription": "column-3",
"description": "column-3",
}
},
"templates": {
"threeColumnGridLayout": '<div class="row">' + '{{#if options.label}}<h2>{{options.label}}</h2><span></span>{{/if}}' + '{{#if options.helper}}<p>{{options.helper}}</p>{{/if}}' + '<div id="column-1" class="col-md-6"> </div>' + '<div id="column-2" class="col-md-6"> </div>' + '<div id="column-3" class="col-md-12"> </div>' + '<div class="clear"></div>' + '</div>'
}
},
"options": {
"fields": {
"requestedfor": {
"type": "text",
"id": "requestedfor",
"label": "*Requested For",
"typeahead": {
"config": {},
"datasets": {
"type": "remote",
"displayKey": "value",
"templates": {},
"source": "http://www.alpacajs.org/data/tokenfield-ajax1.json"
}
}
},
"location": {
"type": "text",
"label": "*Location"
},
"shortdescription": {
"type": "text",
"label": "Short Description"
},
"description": {
"type": "textarea",
"rows": 5,
"cols": 40,
"label": "Description"
}
},
"form": {
"attributes": {
"action": "#",
"method": "post"
},
"buttons": {
"submit": {
"value": "Submit",
"class": "btn btn-default"
}
}
}
}
});
});
</script>
</body>
</html>
So here in the above code i have used these urls for loading json data..
"dataSource": "/fulfiller/connector-custom-data.json"
"schemaSource": "/fulfiller/connector-custom-schema.json"
"optionsSource": "/fulfiller/connector-custom-options.json"
"viewSource": "/fulfiller/connector-custom-view.json"
So instead of using these 3 different properties can i use only one property like "oneSingleJSONSource": "oneJSONRemoteFile.json"
Can anybody provide inputs?

For Alpaca to be inialized it must have a DOM element + a config object that contains the schema, options and other properties that Alpaca already knew in its core code, so in your case this is possible if you try to modify the alpaca core code... If your objective is only to optimize resource loading you can use only one json file that contains all the configuration and input them in the alpaca initialization $(dom).alpaca(_json_data_from_loaded_file). And if you want to have only schema, options and view settings in on file you should divide the data loaded to 3 objects, 1 for schema, 1 for options and the last one for view settings.
Tell me if you want more details on achieving this.
I'll be glad to help.

Related

Can i translate the Yes/No in a boolean switch slider from jquery?

I have a switch button slider with Yes/No option.
The following is the html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yes/No or True/False question - Boolean question, jQuery Survey Library Example</title><meta name="viewport" content="width=device-width"/>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/survey-jquery#1.8.58/survey.jquery.min.js"></script>
<link href="https://unpkg.com/survey-core#1.8.58/modern.min.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css"></head>
<body>
<div id="surveyElement" style="display:inline-block;width:100%;"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
and the following javascript file
Survey
.StylesManager
.applyTheme("modern");
var json = {
questions: [
{
"type": "boolean",
"name": "bool",
"title": "Please answer the question",
"label": "Are you 21 or older?",
"isRequired": true
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
I took the code from here.
Can i translate the Yes/No to Ja/Nein (German)?
There are no id's. So i cant use the replace function. Is this doable in some other way?
You need to use locale setting like this:
Survey
.StylesManager
.applyTheme("modern");
var json = {
locale: "de",
questions: [
{
"type": "boolean",
"name": "bool",
"title": "Please answer the question",
"label": "Are you 21 or older?",
"isRequired": true
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
Here's a list of localizations that You can use:
https://github.com/surveyjs/surveyjs/tree/master/src/localization

How to identify alpacajs field element is changed or modified?

I am new to alpacajs. I have alpacajs form and also have save button for alpacajs from. More than that i have previous and next button. I currently plan to develop something like below.
For example if someone come to the alpacajs form page and if they modified some fields in form then without save they can't allow to go previous/ next so i want to disable those button. If they save the form after the modification then they can go previous/ next so i want to enable those button.
How to do this with jquery and in alpacajs?
If you want to save the form data as draft form in your alpaca form you have only to add the Save as draft button next to your submit and put some logic to it.
So alpaca will handle the click event on that button, but not for Previous / Next buttons.
These buttons stays out of alpaca config, and they handle only page navigation.
To add a new button to your alpaca form
"form": {
"buttons": {
"save": {
"title": "Save draft",
"click": function() {
var value = this.getValue();
// call backend service to save the form as draft
$.ajax({
method: "POST",
url: "https://httpbin.org/post", // backend webservice
data: value // form data
})
.done(function(data) {
// check some backend response code or some flag
// with some conditions activate next and previous buttons
$("#previousBtn").prop('disabled', false);
$("#nextBtn").prop('disabled', false);
})
}
},
"submit": {
"click": function() {
var value = this.getValue();
alert(JSON.stringify(value, null, " "));
}
}
}
}
Don't forget to call some other webservice to get the draft data for that form if there's any and initialize alpaca data config like this:
// data initialization - here you can call a service to get draft data for this form
data = {
username: "test"
};
$("#form").alpaca({
"data": data, // draft data if there's any
"schema": {
// alpaca schema config
}
}
Here's a working fiddle for this.
Please, working sample code below. In this, Name and Feeback fields are marked as required and. Bydefault, Name field is filled, Feedback is empty which throws error and Submit button is disabled, As you type something in Feedback field, Submit button got enabled and form is beig allow to submit because all required fields got filled. Similarly, you can handle your form like this.
Hope this helps !!
<html>
<head>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
</head>
<body>
<div id="form"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#form").alpaca({
"data": {
"name": "Diego Maradona",
"ranking": "excellent"
},
"schema": {
"title": "User Feedback",
"description": "What do you think about Alpaca?",
"type": "object",
"properties": {
"name": {
"type": "string",
"title": "Name",
"required": true
},
"feedback": {
"type": "string",
"title": "Feedback",
"required": true
}
}
},
"options": {
"form": {
"attributes": {
"action": "http://httpbin.org/post",
"method": "post"
},
"buttons": {
"submit": {}
}
},
"fields": {
"name": {
"size": 20,
"helper": "Please enter your name."
},
"feedback": {
"type": "textarea",
"name": "your_feedback",
"rows": 5,
"cols": 40,
"helper": "Please enter your feedback."
}
}
},
"view": "bootstrap-edit"
});
});
</script>
</body>
</html>

Put ng-class attribute to angular-formly field

Hi everyone I’m trying to create a form with angular-formly I have this definition:
{
"options": {
"data": {
"someData": 6
}
},
"fieldGroup": [
{
"className": "ctnStepper",
"key": "customField ",
"type": "form-section"
},
{
"className": "ctnChamp",
"key": "inputTest",
"type": "input"
}
]
}
And I want to put ng-class attribute on the inputTest field so after, the generated form would yield something like this:
<input ng-class="{ 'myClass': model. Something != somethingElse }">
I tried to do this tanks to the ngModelElAttrs but it’s hard to understand and I’m stuck here. Thank you in advance for your answer.
Augustin
I've assgned class to div, you can use as per your requirement.
ng-class="{'alert-danger':x.key=='customField', 'alert-info':x.key=='inputTest'}"
function myCtrl($scope) {
$scope.myData={
"options": {
"data": {
"someData": 6
}
},
"fieldGroup": [
{
"className": "ctnStepper",
"key": "customField",
"type": "form-section"
},
{
"className": "ctnChamp",
"key": "inputTest",
"type": "input"
}
]
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
<div ng-repeat="x in myData.fieldGroup">
<div class="alert" ng-class="{'alert-danger':x.key=='customField', 'alert-info':x.key=='inputTest'}">{{x.className}}</div>
</div>
</div>

Create function (JS) to save string in the file and call this function

I was playing few days with Webix, but I don't have enough experience with it, so need sme help.
What I need:
Create simple page with textarea and button. When I press button, it takes data entered in textarea and saves it in N's string in the data/data.php file.
This is what I could do so far:
<!DOCTYPE html>
<html>
<head>
<title>Loading from DB</title>
<link rel="stylesheet" href="C:/__OSS/00. Soft/Webix/codebase/webix.css" type="text/css">
<script src="C:/__OSS/00. Soft/Webix/codebase/webix.js" type="text/javascript"></script>
</head>
<body>
<!--<?php
$filename = getcwd() . "data/data.php";
echo $filename;
$line_i_am_looking_for = 5;
$lines = file( $filename , FILE_IGNORE_NEW_LINES );
$lines[$line_i_am_looking_for] = '6my modified line';
file_put_contents( $filename , implode( "\n", $lines ) );
?>-->
<div class='header_comment'>Test Button</div>
<div id="testB" style='height:600px'></div>
<hr>
<script type="text/javascript" charset="utf-8">
webix.ready(function(){
gridb = webix.ui({
container:"testB",
"view": "form",
"elements": [
{
"view": "textarea",
"name": "woNumber",
"id": "textarea",
"label": "",
"width": 300,
"height": 200,
"options": [
"onViewResize"
],
"value": "",
"placeholder": "WO number (separate with comma if several)",
"labelPosition": "top"
},
{
"view": "button",
"name": "getWODetails",
"label": "",
"value": "Submit",
"options": [
"autowidth:true"
],
on:{
onItemClick:function(id){
webix.message("Sikim BLEAT'!!!");
/* onItemClick: getTextareaData;
*/
}
},
"labelPosition": "top"
},
{
"view": "button",
"id": "button1",
"name": "getWODetails",
"label": "",
"value": "Passss",
"options": [
"autowidth:true"
],
on:{
onItemClick:function(){
webix.message("Values of textarea is "+$$('textarea').getValue());
}
},
"labelPosition": "top"
}
]
});
});
</script>
</body>
</html>
So I can get value from textarea with $$('textarea').getValue()), but have no idea how to write it in the file.
I can do it easily with PHP (commented out part) but don't know how to make it works with Webix. I believe it is not so hard, but can't figure out what to do..
Any help highly appreaciated.

Populating dynamic table with json data

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>MongoDB Display</title>
<script>
$(document).ready(function(){
var Obj = $.getJSON("http://localhost:3000", function(){
alert("Success");
$(Obj.rows).each(function(index, element){
$(#tableID).append('<tr><td>' + element[1] + '</td><td><table><tr><td>'+ Obj.rows.scripts.element[0]
+ '</td>' + "/" + '<td>' + Obj.rows.scripts.element[1] + '</td></tr></table></td></tr>');
})
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>H 1</h1>
<table id="tableID" border = "1">
<th>
<td>PAGE</td>
<td>SCRIPTS</td>
</th>
</table>
</div>
</body>
</html>
In short;
I have a MongoDB ready to be displayed at localhost:3000. Server is running and I can display the data on the browser with localhost:3000 But when i try to run the above code on the browser, all i can get the js Alert("Success") and the hard coded part of the table. PAGE and SCRIPTS...
the data is:
{
"offset": 0,
"rows": [
{
"_id": {},
"url": "http://www.qweq.com\r",
"totalLines": 3084,
"scripts": [
{
"line": 111,
"tag": "\"asdas/etc/designs/qwe/assets/head-5.30.31.min.js\""
},{
"line": 3065,
"tag": "\"asdas/etc/designs/qwe/assets/common-5.30.31.min.js\""
},{
"line": 3067,
"tag": "\"asda/etc/designs/qwe/assets/category-5.30.31.min.js\""
}
]
},{
"_id": {},
"url": "http://www.qweqsd.com/qwdq23/qweq/qweqw/\r",
"totalLines": 3042,
"scripts": [
{
"line": 113,
"tag": "\"asda/etc/designs/asd/assets/head-5.30.31.min.js\""
},{
"line": 3023,
"tag": "\"asdasd/etc/designs/asd/assets/common-5.30.31.min.js\""
},{
"line": 3025,
"tag": "\"asdad/etc/designs/qwe/assets/category-5.30.31.min.js\""
}
]
},
How can I make this Json data to be display in a dynamic table?
Thank you.
This version is kind of working :) Maybe you'll find inspiration.
$(rows).each(function(index,element){
console.log(index); console.log(element);
$('#tableID').append('<tr><td>' + index + '</td><td>'+ element['url']
+ '</td>' + "/" + '<td>' + JSON.stringify(element['scripts']) + '</td></tr></table>');
});
http://jsfiddle.net/fw4f5L72/1/
It looks like you're missing quotes around the table name. Instead, you should have something like $('#tableID').
Additionally, you'll want your function call to include the data that it's returning to you. For example:
$.getJSON("http://localhost:3000", function(data){
alert("Success");
console.log(data);
});
Then, data will include the JSON object, and you can manipulate it however you please.

Categories

Resources