사용 사례: 개요 페이지 만들기 use-cases-creating-overviews

단일 Page 웹 응용 프로그램을 만들고 아웃바운드 전환 및 다음 페이지로의 전환을 사용하지 않도록 설정합니다.

페이지 제목 변경.

이 제목은 개요 헤더와 웹 애플리케이션 개요에 표시됩니다.

웹 응용 프로그램 속성에서 Single-page Web application 템플릿을 선택하여 응용 프로그램의 렌더링을 수정합니다.

웹 응용 프로그램의 Page 활동을 열고 목록(Static element > List)을 엽니다.

목록의 Data 탭에서 Web applications 문서 유형과 Label, Creation date 및 Type of application 출력 열을 선택합니다.

Filter 하위 탭에서 웹 응용 프로그램만 표시하고 템플릿은 보기에서 제외하기 위해 아래 표시된 대로 다음 필터를 만듭니다.

페이지의 구성 창을 닫고 Preview ​을(를) 클릭합니다.

데이터베이스에서 사용할 수 있는 웹 응용 프로그램 목록이 표시됩니다.

웹 응용 프로그램의 Page 노드에 커서를 놓고 Select folder 요소(Advanced controls > Select folder)를 추가합니다.

표시되는 Storage 창에서 Edit variables 링크를 클릭합니다.

필요에 따라 변수 레이블을 변경합니다.

변수 이름을 folder 값으로 변경합니다.

변수에 XML 형식을 적용합니다.

Refresh page 상호 작용을 선택합니다.

커서를 목록에 놓고 Advanced 탭에서 목록의 Folder filter XPath 탭에서 이전에 만든 변수를 참조합니다. 폴더 링크와 관련된 요소의 이름(예: folder)을 사용해야 합니다.

Page 요소에 커서를 놓고 링크(Static elements > Link)를 추가합니다.

링크 레이블은 개요의 버튼에 표시되므로 수정합니다.

이 예제에서 레이블은 New ​입니다.

URL 필드에 다음 URL을 삽입합니다. xtk://open/?schema=nms:webApp&form=nms:newWebApp.

동일한 창에 URL을 표시하도록 선택합니다.

이미지 필드에 웹 응용 프로그램 아이콘을 추가합니다. /nms/img/webApp.png.

이 아이콘은 New 단추에 나타납니다.

Style 필드에 button ​을 입력합니다.

이 스타일은 이전에 선택한 Single-page Web application 템플릿에서 참조됩니다.

이전에 만든 목록 요소 위에 커서를 놓습니다.

General 탭의 드롭다운 목록에서 Columns and additional detail 표시 모드를 선택합니다.

Data 탭에서 Primary key , Internal name 및 Description 열을 추가하고 각 열에 대해 Hidden field 옵션을 선택합니다.

이렇게 하면 각 항목의 세부 사항에서만 이 정보를 볼 수 있습니다.

Additional detail 탭에서 다음 코드를 추가합니다.

<div class="detailBox">
  <div class="actionBox">
    <span class="action"><img src="/xtk/img/fileEdit.png"/><a title="Open" class="linkAction" href="xtk://open/?schema=nms:webApp&form=nms:webApp&pk=
    <%=webApp.id%>">Open...</a></span>
    <%
    if( webApp.@appType == 1 ) { //survey
    %>
    <span class="action"><img src="/xtk/img/report.png"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&
      _schema=nms:webApp&_selection=<%=webApp.@id%>
      &__sessiontoken=<%=document.controller.getSessionToken()%>">Reports</a></span>
    <%
    }
    %>
  </div>
  <div>
    Internal name: <%= webApp.@internalName %>
  </div>
  <%
  if( webApp.desc != "" )
  {
  %>
  <div>
    Description: <%= webApp.desc %>
  </div>
  <%
  }
  %>
</div>

Page 요소에 커서를 놓고 Container > Standard ​을(를) 선택합니다.

링크 편집기와 링크가 서로 옆에 있도록 열의 수를 2(으)로 설정하십시오.

요소 레이아웃에 대한 자세한 내용은 이 섹션을 참조하세요.

dottedFilter ​을(를) 적용합니다.

이 스타일은 이전에 선택한 Single-page Web application 템플릿에서 참조됩니다.

이전 단계에서 만든 컨테이너에 커서를 놓고 Advanced controls 메뉴를 통해 링크 편집기를 삽입합니다.

자동으로 열리는 저장소 창에서 Variables 옵션을 선택한 다음 Edit variables 링크를 클릭하고 데이터 필터링을 위한 XML 변수를 만듭니다.

레이블을 수정합니다.

개요에서 Filter 필드 옆에 표시됩니다.

연산자 테이블을 응용 프로그램 스키마로 선택합니다.

커서를 목록 요소에 놓고 Data > Filter 탭을 통해 필터를 만듭니다.

• '작성자' 링크의 식: 외래 키
• 연산자: ​이(가) 다음과 같음
• 값: 변수(변수)
• 고려 사항: '$(var2/@id)'!=''

컨테이너에 커서를 놓고 Static elements 메뉴를 통해 Link ​을(를) 삽입합니다.

레이블을 수정합니다.

Refresh data in a list ​을(를) 선택합니다.

이전에 만든 목록을 추가합니다.

Image 필드에 새로 고침 아이콘을 추가합니다. /xtk/img/refresh.png.

정렬 순서 화살표를 사용하여 아래와 같이 웹 응용 프로그램의 다양한 요소를 다시 구성합니다.