윅스 (Wix) 코딩 예제 - 컬렉션 데이터 계산하기 및 표시하기 (Wix Code Tutorial: Calculating and Displaying Collection Data)

윅스 (Wix) 코딩 예제 - 컬렉션 데이터 계산하기 및 표시하기 (Wix Code Tutorial: Calculating and Displaying Collection Data)

 

 

 

설명)

 

컬렉션 중 하나에서 직접 가져오지 않은 데이터를 표시하려는 경우가 많이 있습니다. 대신 컬렉션에 저장된 데이터를 기반으로 값을 계산하고 계산된 값을 표시하려고합니다. 때로는 표시중인 각 항목의 데이터를 계산하고 항목 수를 기준으로 집계 값을 계산하려는 경우도 있습니다. 이 글에서는 다양한 페이지 요소를 사용하여 이러한 데이터를 표시하는 방법을 보여줍니다.

 

 

품목별 계산 (Per Item Calculations)

항목별로 데이터를 계산하고 표시하는 방법에는 여러가지가 있습니다. 여기서는 데이터 후크를 사용하는 방법을 설명합니다.

 

데이터 관리자의 메뉴에서 후크를 클릭하여 컬렉션에 후크를 추가할 수 있습니다. 등록하려는 후크를 선택한 후 골격 코드는 선택한 각 후크에 대해 사이트 백엔드의 data.js 파일에 추가됩니다.

 

아이디어의 의도는 페이지 코드에 도달하기 전에 컬렉션에서 데이터를 가로채는 afterQuery 후크를 만드는 것입니다. 데이터세트 또는 쿼리에서 검색한 각 항목에 대해 후크가 실행됩니다. 후크는 원하는 계산을 수행하고 페이지에 도달하기 전에 계산된 데이터를 각 항목에 추가합니다. 그런 다음 페이지 코드에서 계산된 데이터를 가져와 페이지의 요소에 적용할 수 있습니다.

 

예를 들어 직원에 대한 정보가 들어있는 Employees라는 컬렉션이 있다고 합니다. 컬렉션은 직원의 이름과 성을 별도의 입력란(필드)에 저장할 수 있습니다. 직원의 생년월일도 저장할 수 있습니다. 그러나 표시 목적으로 출생일 대신 한 명의 요소 및 직원 연령대에 직원 이름을 함께 표시하려고합니다.

 

시작하려면 Employees 컬렉션에 대한 afterQuery 후크를 작성합니다.

 

// In file backend/data.js

export function Employees_afterQuery(item, context) {
  item.fullName = item.lastName + ", " + item.firstName;
  item.age = ageFromDob(item.dob);

  return item;
}

 

 

후크는 컬렉션에서 항목을 받고 두 개의 새 속성을 컬렉션에 추가합니다. 먼저 직원의 이름을 "lastName, firstName"형식으로 연결하는 fullName 속성을 추가합니다. 둘째, dob 입력란(필드)에 저장된 날짜를 기준으로 직원의 나이를 계산하는 age 속성을 추가합니다.

후크는 data.js 파일에 포함될 수 있는 다음 함수를 사용합니다.

 

function ageFromDob(dob) {
  const now = new Date();
  const days = now.getDate() - dob.getDate();
  const months = now.getMonth() - dob.getMonth();
  let age = now.getFullYear() - dob.getFullYear();

  if (months < 0 || (months === 0 && days < 0)) {
    age--;
  }

  return age.toString();
}

 

 

 

노트 :

ageFromDob 함수를 별도의 파일로 만들고 data.js로 가져올 수 있습니다. 그러면 다른 곳에서 함수를 사용할 수 있습니다.

데이터세트나 쿼리를 사용하여 Employees 컬렉션에서 항목을 검색하는 페이지에는 이제 각 항목에 추가한 새 속성이 있습니다. 다음 단계는 해당 속성의 값을 페이지의 요소에 적용하는 것입니다.

 

다음 예제에서는 페이지가 데이터세트를 사용하여 데이터를 받는 것으로 가정합니다. 일반적으로 이는 평소처럼 계산되지 않은 데이터에 페이지 요소를 연결할 수 있음을 의미합니다. 그러나 계산된 데이터가 데이터베이스 스키마의 일부가 아니므로 코드를 사용하여 데이터를 페이지 요소에 "연결(connect)"해야합니다. 데이터세트 대신 쿼리를 사용하여 페이지 정보를 검색하는 경우 유사한 방법을 사용하여 계산된 데이터를 페이지 요소에 적용할 수 있습니다.

 

 

 

 

텍스트 요소 (Text Elements)

계산된 데이터를 텍스트 요소에 적용하려면 텍스트 요소의 text 속성 값을 데이터세트의 onReady( ) 함수에서 계산된 속성 값 중 하나의 값으로 설정합니다. 페이지의 데이터세트에 둘 이상의 항목이 포함되어 있고 이전 및 다음 버튼을 사용하여 사이트 방문자가 여러 항목을 클릭할 수 있게하려면 데이터세트의 onCurrentIndexChanged 함수에서 텍스트 요소의 text 속성 값을 설정해야합니다. 

 

평상시처럼 페이지의 다른 모든 요소를 ​​계산되지 않은 해당 입력란(필드)에 연결할 수 있습니다.

 

예를 들어, 위에서 언급한 직원 데이터를 가정하면 연결 패널을 사용하여 계산되지 않은 입력란(필드) (예 : 주소 및 직위)를 페이지 요소에 연결합니다. 그러나 계산된 데이터, 직원 이름 및 나이가 연결되지 않은 요소는 그대로 두십시오. 이러한 연결은 다음 코드에서 처리됩니다.

 

$w.onReady(function () {
  $w("#dataset1").onReady(() => {
    populateCalculatedFields();
  } );
 
  $w("#dataset1").onCurrentIndexChanged( (index) => {
    populateCalculatedFields();
  } );
} );

function populateCalculatedFields() {
  const currentItem = $w("#dataset1").getCurrentItem();
  $w("#textFullName").text = currentItem.fullName;
  $w("#textAge").text = currentItem.age;
}

 

 

 

 

여기에서 populateCalculatedFields( ) 함수는 데이터세트에서 계산된 데이터를 가져와 해당 페이지 요소에 적용합니다. 데이터세트가 처음 준비되면 현재 항목이 변경될 때마다 호출됩니다.

 

 

 

표 (Table)

계산된 데이터를 표(Table)에 적용하려면 columns 속성을 사용하여 표(Table)의 열을 재설정하여 각 항목의 계산된 값에 대한 열을 포함합니다. 그런 다음 표(Table)의 rows 속성을 사용하여 표(Table)의 데이터를 설정합니다.

 

일반적으로 표(Table)을 데이터세트에 연결하는 것으로 시작합니다. 그런 다음 표(Table)의 표(Table) 관리 패널을 사용하여 표(Table)에 표시하지 않으려는 열을 삭제합니다. 표(Table)에서 열을 삭제하려면 해당 표(Table)에서 데이터를 계산해야하기 때문입니다.

 

예를 들어 위에서 언급한 직원 데이터를 가정하면 표(Table)을 데이터세트에 연결하면 이름, 성, 이름 및 DOB 열이 삭제됩니다. 남아있는 열은 데이터세트에서 데이터를 받습니다. 계산된 데이터를 표시할 열은 다음 코드로 작성됩니다.

 

$w.onReady(function () {
  const currentColumns = $w("#employeeTable").columns;
  const calculatedColumns = [
    {
      "id": "colFullName",
      "dataPath": "fullName",
      "label": "Name",
      "type": "string",
    },
    {
      "id": "colAge",
      "dataPath": "age",
      "label": "Age",
      "type": "string",
    }
  ];
  $w("#employeeTable").columns = calculatedColumns.concat(currentColumns);

 

 

여기에서 코드는 columns 속성을 사용하여 표(Table)에서 현재 열을 가져오는 것으로 시작합니다. 데이터세트의 입력란(필드)에서 삭제한 항목을 제외한 입력란(필드)에 해당하는 항목임을 기억합니다.

다음으로 계산된 데이터를 보유할 두 개의 새로운 열의 배열을 만듭니다.

그런 다음 두 열 세트를 함께 모아 표(Table)의 columns 속성을 다시 설정합니다.

 

 

반복 레이아웃 (Repeater)

계산된 데이터를 반복 레이아웃에 적용하려면 반복 레이아웃의 onItemReady( ) 함수를 사용하여 해당 요소의 값을 설정합니다.

 

반복 레이아웃의 다른 모든 요소를 ​​평소처럼 계산되지 않은 해당 입력란(필드)에 연결할 수 있습니다.

 

예를 들어, 위에서 언급한 직원 데이터를 가정하면 연결 패널을 사용하여 반복 레이아웃의 요소에 주소, 직책과 같은 계산되지 않은 입력란(필드)를 연결합니다. 그러나 계산된 데이터, 직원 이름 및 나이가 연결되지 않은 요소는 그대로 둡니다. 이러한 연결은 다음 코드에서 처리됩니다.

 

$w.onReady(function () { 
  $w("#employeeRepeater").onItemReady( ($item, itemData, index) => {
    $item("#repeaterFullName").text = itemData.fullName;
    $item("#repeaterAge").text = itemData.age;
  } );
} );

 

 

여기서 반복 레이아웃 onItemReady( ) 함수는 데이터세트에서 계산된 데이터를 가져와서 반복 레이아웃 항목의 해당 요소에 적용합니다. 반복 레이아웃이 작성될 때마다 반복 레이아웃의 각 항목에 대해 호출됩니다.

 

 

 

 

집계 (Aggregations)

집계된 값을 표시하려는 경우 데이터 후크를 사용하면 후크가 항목별로 작동하므로 반드시 가장 좋은 옵션은 아닙니다. 대신 일반적으로 페이지 코드에서 집계 계산을 수행하는 것이 좋습니다.

 

 

노트 :

이 예제는 컬렉션에 1000개 이하의 항목이 있는 경우에만 작동합니다. 이는 query( ) 함수가 최대 1000개 항목을 검색하는 것으로 제한되기 때문입니다. 항목이 1000개 이상인 경우 여러 쿼리를 수행하여 제한을 해결할 수 있습니다.

 

 

 

예를 들어, 월간 비용에 대한 정보가 들어있는 Expenses라는 컬렉션이 있다고합시다. 컬렉션에는 월, 유형 및 각 개별 비용의 금액이 저장될 수 있습니다. 매월 여러 항목이 있을 수 있습니다. 모든 비용 항목을 개별적으로 표시하는 대신 매월 합계를 표시하기만하면 됩니다.

 

다음 코드를 사용하여 집계된 비용 데이터가 있는 표(Table)을 채울 수 있습니다.

 

import wixData from 'wix-data';
import {monthSort} from 'public/utils';

$w.onReady(function () {
  $w("#aggTable").columns = [
    {
      "id": "col1",
      "dataPath": "month",
      "label": "Month",
      "type": "string"
    },
    {
      "id": "col2",
      "dataPath": "total",
      "label": "Total Expenses",
      "visible": true,
      "type": "number"
    }
  ];

  wixData.query("Expenses")
    .ascending("month")
    .limit(1000) // include a limit if you have more than 50 items
    .find()
    .then( (result) => {
      const months = result.items.map(x => x.month)
        .filter((obj, index, self) => index === self.indexOf(obj))
        .sort(monthSort);
      const aggregated = months.map(x => {
        return {
          month: x,
          total: result.items.filter(obj => obj.month === x)
                  .map(z => z.amount)
                  .reduce((sum, current) => sum + current)
        };
    } );
   
    $w("#aggTable").rows = aggregated;
  } );
} );

 

코드는 표(Table)의 열을 설정하여 시작합니다. 그 달의 이름과 그 달 동안의 총 경비를 위한 두 개의 열이 있을 것입니다.

 

그런 다음 코드는 비용 컬렉션에 대한 쿼리를 수행합니다. 쿼리 결과를 받으면 표준 자바스크립트(JavaScript) 배열 함수를 사용하여 매월 총 지출을 계산합니다.

 

이 특별한 경우 코드는 먼저 컬렉션에서 발견된 개월의 정렬된 목록을 추출합니다. 공개 목록의 다음 함수를 사용하여 월 목록을 정렬합니다.

 

const months = ["January", "February", "March", "April", 
    "May", "June", "July", "August", 
    "September", "October", "November", "December"];

export function monthSort(a, b) {
  return months.indexOf(a) - months.indexOf(b);
}

 

 

 

그런 다음 각 달 동안 두 쌍의 key:value가 있는 객체를 만듭니다. 첫 번째 쌍은 해당 달의 이름과 일치합니다. 두 번째 쌍은 그 달의 총지출에 해당합니다.

 

마지막으로, 방금 작성된 객체가 표(Table)의 행 데이터로 설정됩니다.

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-calculating-and-displaying-collection-data