Cách tạo Form nâng cao

1. Cách tạo
2. Cách thực thi
3. Query
    3.1 Sinh dữ liệu html/json trực tiếp từ lệnh iif thông qua tên query trong lệnh iif
    3.2 Sinh dữ liệu html/json từ cấu hình query của FORM.
    3.3 Sinh ra dữ liệu JSON, từ JSON hiển thị ra body html  thông qua jquery
    3.4 Sinh ra dữ liệu JSON, từ JSON hiển thị ra body html  trực tiếp từ lệnh iif
    3.5 Ví dụ với angular, sinh biến json trước khi nạp angular
4. Dùng lệnh
5. Sử dụng các lệnh từ iif để làm giao diện
6. Các tham số url
7. Cấu hình config
 - AddUrlPara
9. Một số nghiệp vụ hay code
10. Một số lỗi hay gặp
--------

1. Cách tạo
Truy cập đường dẫn: /Adminxml/xml_form_ds.aspx?file=SysFormHTML.xml

Name: Tên
Title: hiển thị trên cùng
Query: nguồn truy cập dữ liệu
HTML_Start
HTML_Body
HTML_End
HTML_Header
      * Nạp phần header của page web, dùng để nạp javascript hay style css
Config

2. Cách thực thi
* Chế độ 1:
/adminxml/xml_form_ds.aspx?name=Tên
/adminxml/xml_form_ds.aspx?name=Tên&config_sys=nomaster  (ko xuất hiện giao diện menu)

* Chế độ 2:
** /adminxml/xml_form_ds_mini.aspx?name=Tên

* Chế độ mini chạy sẽ không nạp các thư viện js, css từ trang master



3. Query: Lấy nguồn dữ liệu từ Query đã tạo
   Tham số này có thể để trống
   Nếu dùng dữ liệu nên sử dụng để tăng tốc độ xử lý.
   * Nếu query để trong file riêng cấu hình BanHang_iif/BangGia
           File query BanHang_iif.xml có tên BangGia
    Tham khảo cách tạo Query

   Gọi query nhưng có tham số truyền vào cho query
Ví dụ:
<Query>
<ID>cauhinh</ID>
<Src>cnSQL</Src>
<Type>Sql</Type>
<Cmd>
Select * From tbCauHinh
Where _SYS_Key Like @Ma
</Cmd>
<SqlParameter>
Ma<pr&/><iif-D>Url:ma</iif-D>
</SqlParameter>
</Query>
Gọi trực tiếp từ FORM thì gõ ô Query: CauHinh , nhưng không muốn Ma nhận từ URL mà nhận từ câu query truyền vào.

CauHinh/--><iif-D>Url:ma</iif-D>--->ChonSP_%

 Thay thế đoạn màu hồng thành chữ phía sau --->

  Có 2 cách lấy dữ liệu trong html của form
    3.1 Sinh dữ liệu html/json trực tiếp từ lệnh iif thông qua tên query trong lệnh iif
    3.2 Sinh dữ liệu html/json từ cấu hình query của FORM.
    3.3 Sinh ra dữ liệu JSON, từ JSON hiển thị ra body html  thông qua jquery
    3.4 Sinh ra dữ liệu JSON, từ JSON hiển thị ra body html  trực tiếp từ lệnh iif
    3.5 Ví dụ với angular, sinh biến json trước khi nạp angular


     
   * Cách 1: truy cập trực tiếp từ html
   Sinh dữ liệu html/json trực tiếp từ lệnh iif thông qua tên query trong lệnh iif

     <iif-F>
  <Source><type:query/>BanHang_iif/DonHang_Load</>0</Source>
  <ItemF>
  <%i=Ten=i%>      
  </ItemF>
  </iif-F>

Giải thích:   <Source><type:query/>_PATH_QUERY_</>chỉ_số</Source>
    * Nếu lấy 1 table thì ổn, nhưng nếu lấy nhiều table (2 table trả về) thì chậm vì lấy 1 table phải kết nối sql 1 lần.

  
      * Cách 2: cấu hình tên query tại ô query trong FORM
    Sinh dữ liệu html/json từ cấu hình query của FORM.
    Ví dụ ta có 1 query tên banhang trả về 2 table: 1 chứng từ, 2 loại chứng từ

, Ví dụ query trả về 2 table 0 và 1
<iif-F>
  <Source><type:query/>#</>0</Source>
  <ItemF>
  <%i=Ten=i%>      
  </ItemF>
  </iif-F>
<iif-F>
  <Source><type:query/>#</>1</Source>
  <ItemF>
  <%i=Ten=i%>      
  </ItemF>
  </iif-F>

  
  Cách 3: Sinh ra dữ liệu JSON, từ JSON hiển thị ra body html  thông qua jquery
<script>

   $.get("Query_Do.aspx?name=NhaHang/SoDoTiec&out=json&nam=2023&thang=2", function(data, status){
       for (x in data.Q1) {
          alert( data.Q1[x]._SYS_KEY );
      }
  });
</script>
* Cách này có nhược điểm là query lấy xong mới trả về có độ trể, nên chưa tương tác được với biến của trang
 

 
Cách 4: Sinh ra dữ liệu JSON, từ JSON hiển thị ra body html  trực tiếp từ lệnh iif
  * Cách này chậm, nhưng ứng dụng trong một số trường hợp
    - Khi ứng dụng angular / jquery cần có biến trước mới load từ angular

<script>
const obj1 = <iif-F><Source><type:query/>NhaHang/SoDoTiec</>0</Source><OutData>json</OutData></iif-F>;
alert(obj1.length);
alert(  JSON.stringify( obj1 ) );
</script>
 * Cách lặp đối tượng json

* Cách này hay dùng


Ví dụ với angular, sinh biến json trước khi nạp angular
file javascript
const jsonTinhTrang = <iif-F><Source><type:query/>nv/tt</>0</Source><OutData>json</OutData></iif-F>;
//nv/tt nếu đã gán ở form thì gõ #
// alert(  JSON.stringify( jsonTinhTrang ) );
var app = angular.module("myApp",  ['ngSanitize']);
app.controller('myCtrl', function($scope, $http){
    //==== khi vào thì biến tinhtrang được khởi tạo đầu tiên
    $scope.tinhtrang= jsonTinhTrang;
}   

** Nếu query trả nhiều table cần lấy hết ta sửa

<Source><type:query/>nv/tt</>0</Source>   * 0 thành all

$scope.tinhtrang= jsonTinhTrang.table1;
const jsonCH = <iif-F><Source><type:query/>#</>all</Source><OutData>json</OutData></iif-F>;

Ví dụ lấy cấu hình theo mã từ tbCauHinh:

var timsp_theo_macdinh = jsonCH.cauhinh.filter( obj =>  obj._SYS_KEY=='ChonSP_TimTheo' );

  

    if(timsp_theo_macdinh.length==0)

        $scope.timsp_theo_chon="X";

    else

        $scope.timsp_theo_chon="Y";

<iif-D>Date:Now_AddDay;-1<fm>{0:1/1/yyyy}</fm></iif-D>
<iif-D>Date:Now_AddDay;-1<fm>{0:31/12/yyyy}</fm></iif-D>

9. Một số nghiệp vụ hay sử dụng khi code
     - Lấy dữ liệu query đưa vào Form HTML
    
  * Thêm mô tả tiêu đề cho form
$("#title_frm_sub1").html("<span class='badge badge-primary ml-2 titleTop'><i class='fas fa-question'></i> Danh sách khách hàng từ nhật ký+danh mục</span>");

10. Một số lỗi hay gặp
* File html đã có nhưng không nạp ra
    Nguyên nhân do: thiếu lệnh <iif-H>/#_url_name_#.htm</iif-H>  trong HTML_Body