ServiceNow UI 빌더

안녕하세요 여러분, 새해 복 많이 받으세요!

✨
지난 몇 달 동안 제가 어디에 있었는지 궁금해하시는 분들이 계실 것으로 알고 있습니다. Cloud Architect 시험에 합격한 후 저는 모두가 이야기해 온 이 새롭고 멋진 웹 인터페이스인 UI Builder!

에 뛰어들기로 결정했습니다.

UI 빌더란 무엇입니까?

UI Builder는 작업 공간과 포털을 위한 사용자 정의 페이지를 생성하고 구성하기 위한 웹 인터페이스입니다. Now Experience UI 프레임워크의 일부이며 다음을 수행할 수 있습니다.
•페이지를 구축하세요.
•레이아웃과 구성요소를 설정하세요.
•작업에 대한 이벤트 핸들러를 정의합니다.
•데이터 바인딩을 사용하여 데이터를 가져오고 표시합니다.
•구성 요소 내에서 사용할 클라이언트 스크립트 및 클라이언트 상태 매개변수(변수라고도 함)를 생성합니다.

기본적으로 맞춤형 웹 경험을 만들기 위한 원스톱 상점입니다. UI Builder의 주요 부분과 시작 방법을 분석해 보겠습니다.

UI 빌더 작동 방식

1. 경험과 페이지

경험은 사용자가 작업을 관리하고, 정보를 찾고, 도움을 받을 수 있는 페이지 모음입니다. 각 페이지는 해당 URL로 정의되며 해당 URL에 있는 콘텐츠를 정의합니다. 레이아웃과 구성 요소
라는 두 가지 핵심 요소로 구성됩니다. 2. 레이아웃
레이아웃은 콘텐츠가 페이지에 표시되는 방식을 구성합니다. 페이지 구축의 첫 번째 단계이며 다음을 사용할 수 있습니다.
•기본 열 레이아웃: 최대 6개의 열이 포함된 사전 정의된 구조입니다.
•고급 레이아웃: 더 많은 사용자 정의를 위한 Flexbox 또는 CSS 그리드 기반 디자인.
레이아웃에는 단순화된 콘텐츠 트리, 구성 및 스타일 지정을 위한 패널과 같은 도구도 함께 제공됩니다.
3. 구성요소
구성 요소는 양식, 버튼, 데이터 목록, 차트, 이미지 또는 메뉴와 같은 페이지의 구성 요소입니다. 레이아웃을 설정한 후에는 페이지에 구성 요소를 추가할 수 있습니다. 다음을 포함하는 구성 패널을 사용하여 각 구성 요소를 사용자 정의할 수 있습니다.
•탭 구성: 정적 값, 데이터 바인딩 또는 JavaScript를 사용하여 속성을 편집합니다.
•스타일 탭: 맞춤 CSS를 추가하세요.
•이벤트 탭: 사용자 상호작용에 의해 실행되는 작업을 설정합니다.

레이아웃을 먼저 추가한 다음 구성요소를 추가하는 것이 가장 좋습니다.

페이지 변형 및 조건

UI Builder의 모든 페이지는 변형입니다. 처음 만드는 페이지는 기본 변형입니다. 양식 보기와 같은 변형을 생각해 보십시오. 동일한 기록이지만 상황에 따라 다르게 표시됩니다. 다양한 대상 또는 조건에 대한 추가 변형을 만들 수 있습니다.
조건에 따라 페이지 변형이 표시되는 시기가 결정됩니다. 다음을 사용하여 설정할 수 있습니다.
•조건 작성기를 사용하여 규칙을 설정합니다.
•인코딩된 쿼리를 통해 조건을 지정합니다.
조건이 작동하려면 페이지 매개변수로 전달된 데이터에 의존합니다. 이에 대해서는 다음 기사에서 자세히 다룰 것입니다.

다음은 무엇입니까?

UI Builder에서 간단한 경험을 만들어 봅시다!
기록 페이지를 볼 수 있는 경험을 만들어 보겠습니다.

1. 시작하기.

.ServiceNow 인스턴스에 로그인합니다.
.Now Experience Framework >로 이동합니다. 필터 탐색기에서 UI Builder를 선택하여 UI Builder 인터페이스를 엽니다.

2.경험 만들기

.오른쪽 상단에 있는 만들기 버튼을 클릭하세요.

.드롭다운에서 경험을 선택하세요. 모달 창이 나타납니다.
. 다음 세부정보를 입력하세요.
•이름: 이름. Ex '기본 작업공간'
•앱 셸 UI: Workspace 앱 셸
•착륙 경로: 기본값으로 유지 - 홈
•역할: 지금은 기본 역할을 제거하세요.

.만들기를 클릭한 다음 경험 열기를 선택하여 계속 진행하세요.

3.페이지 만들기

.새 환경에서 새 페이지 만들기를 클릭하거나 페이지 및 변형 옆에 있는 아이콘을 클릭하세요.

템플릿을 사용할 예정입니다
표준 기록 템플릿 선택

.템플릿의 페이지 이름을 입력하세요. URL 경로가 자동으로 입력됩니다.

.계속,
을 클릭하세요. .저희 레코드 템플릿에는 사전 구성된 필수(테이블 및 sys_id) 및 선택적(쿼리, extraParams 보기, selectedTab) 매개변수가 함께 제공됩니다. 이를 검토한 후 좋아요.

를 선택하세요.

4.변형 생성

.페이지 변형의 이름을 지정한 다음 잠재고객 및 조건을 건너뛰세요. 계속을 클릭하세요.
.변형 편집기:
를 숙지하세요. •왼쪽 패널: 레이아웃 및 구성요소 추가를 위한 콘텐츠 트리
•오른쪽 패널: 구성 요소를 사용자 정의하기 위한 탭이 있는 구성 패널
•왼쪽 하단: 데이터 리소스, 클라이언트 상태 매개변수 및 클라이언트 스크립트와 같은 동적 데이터용 도구.

그게 다야!

다음 기사에서는 페이지 매개변수를 페이지 변형에 추가하여 페이지 내에서 활용할 데이터 값을 전달할 수 있도록 하여 경험을 확장할 것입니다.

이 개요에서는 레이아웃과 구성 요소부터 페이지와 변형에 이르기까지 UI Builder의 기본 사항을 소개했습니다. 다음 기사에서는 다음을 탐색하여 동적인 대화형 페이지를 만드는 방법에 대해 더 자세히 알아볼 것입니다.
•페이지 매개변수.
•데이터 리소스.
•클라이언트 상태 매개변수.
•클라이언트 스크립트.
•이벤트.
이 시리즈를 마치면 UI Builder와 유용하고 사용자 친화적인 경험을 만드는 방법을 확실히 이해하게 될 것입니다!!

---

UI Builder에 대해 자세히 알아보기
•UI Builder에 대한 무료 Now Learning 강좌를 수강하세요
https://nowlearning.servicenow.com/lxp/en/now-platform/ui-builder-fundamentals-washington?id=learning_course_prev&course_id=7ba080d447fdd65076e07884f16d435e

•UI Builder의 ServiceNow 설명서
https://www.servicenow.com/docs/bundle/xanadu-application-development/page/administer/ui-builder/concept/ui-builder-overview.html

위 내용은 ServiceNow UI 빌더의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!