Posted By

ElenaXB on 01/31/19


Tagged

javascript web app Webix


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Stealthm


How to create Webix-based multi-line inputs for homogeneous user data


 / Published in: JavaScript
 

URL: https://blog.webix.com/how-to-sreate-multi-line-inputs-for-homogeneous-user-data/

Learn how to create multi-line inputs for homogeneous user data using Webix UI framework. Follow the link above to see more programming examples from Webix.

  1. webix.protoUI({
  2. name:"multidate",
  3. $init:function(config){
  4. config.body = {
  5. margin:5, rows:[this._getForm("plus")]
  6. };
  7.  
  8. this.$ready.push(() => {
  9. this._inputs = [this.queryView("form").config.id];
  10. });
  11. },
  12. _getForm:function(mode){
  13. const id = webix.uid();
  14. return {
  15. view:"form", id:id, borderless:true, padding:0, cols:[
  16. { view:"text", label:"Step", labelWidth:50, name:"step" },
  17. { view:"daterangepicker", stringResult:true, name:"time", label:"When", labelWidth:50 },
  18. this._getIcon(mode,id)
  19. ]
  20. }
  21. },
  22. _getIcon(mode,id){
  23. return {
  24. view:"icon", icon:"wxi-"+mode+"-circle",
  25. click:() => {
  26. if (mode == "plus") this.addInput();
  27. else this.removeInput(id);
  28. }
  29. };
  30. },
  31. addInput:function(){
  32. const section = this.getBody().addView(this._getForm("minus"));
  33. this._inputs.push(section);
  34. },
  35. removeInput:function(id){
  36. for (var i = 0; i < this._inputs.length; i++){
  37. if (this._inputs[i] == id){
  38. this._inputs.splice(i, 1);
  39. break;
  40. }
  41. }
  42. this.getBody().removeView(id);
  43. },
  44. setValue(value){
  45. const dataLines = value.length;
  46. const inputs = this.getChildViews().length;
  47. const delta = dataLines - inputs;
  48.  
  49. if (delta > 0){
  50. for (let i = 0; i < delta; i++)
  51. this.addInput(this);
  52. }
  53. else if (delta < 0){
  54. for (let i = 1; i <= (-1)*delta; i++){
  55. this.removeInput(inputs-i-1);
  56. }
  57. }
  58.  
  59. this._inputs.forEach((view, i) => {
  60. $$(view).setValues(value[i]);
  61. });
  62. },
  63. getValue(){
  64. let values = [];
  65. this._inputs.forEach((view) => {
  66. const vs = $$(view).getValues();
  67. if (!this._isEmpty(vs))
  68. values.push(vs);
  69. });
  70. return values;
  71. },
  72. _isEmpty(obj){
  73. for (let i in obj){
  74. if (typeof obj[i] === "object")
  75. return this._isEmpty(obj[i]);
  76. else
  77. if (obj[i]) return false;
  78. }
  79. return true;
  80. }
  81. }, webix.ui.forminput);
  82.  
  83. var form = {
  84. view:"form", id:"form1", margin:10,
  85. elementsConfig:{ labelPosition:"top"},
  86. rows:[
  87. { view:"text", label:"Name", name:"name" },
  88. { view:"text", label:"Email", name:"email" },
  89. { view:"multidate", label:"Qualifications", name:"qualification" },
  90. { cols:[
  91. { },
  92. {
  93. view:"button", value:"Get values", type:"form",
  94. click:function(){
  95. const values = this.getFormView().getValues();
  96. $$("result").setHTML("<pre>"+JSON.stringify(values, null, 2)+"</pre>");
  97. }
  98. }
  99. ]}
  100. ]
  101. };
  102.  
  103. webix.ui({
  104. view:"scrollview",
  105. body:{
  106. rows:[
  107. form,
  108. {
  109. template:"Click <b>Get Values</b> to see the data", id:"result",
  110. autoheight:true
  111. }
  112. ]
  113. }
  114. });
  115.  
  116. const formData = {
  117. name:"Dr Arienette Wolfe",
  118. qualification:[
  119. { step:"University of Zurich, Doctor of Medicine", time:{ start:"1999-8-1", end:"2005-5-25" }},
  120. { step:"Internship at Princeton - Plainsboro Teaching Hospital, New Jersey, USA", time:{ start:"2005-8-1", end:"2006-4-30" }},
  121. { step:"Resident Doctor", time:{ start:"2006-5-1", end:"2009-2-31" }},
  122. { step:"Attending Doctor", time:{ start:"2009-3-1", end:"2013-2-31" }},
  123. { step:"General Practitioner", time:{ start: "2013-4-1", end:null }}
  124. ]
  125. };
  126.  
  127. $$("form1").setValues(formData);

Report this snippet  

You need to login to post a comment.