Loading
시스템 관리자에 대한 피싱 방지 MFA 및 전 직원사용자 MFA 적용 안내 더 많이 읽기
현재 다수의 문의가 발생하여 대응에 지연이 발생하고 있습니다.더 많이 읽기
뉴포트 디자인 시스템 사용

위치:

  1. Salesforce 도움말
  2. 문서
  3. Omnistudio

뉴포트 디자인 시스템 사용

Newport Design System을 사용하면 Omniscript 요소의 모양과 동작을 사용자 정의할 수 있습니다. Newport에는 실행 중인 디자인 변경 사항을 볼 수 있는 브라우저 기반 미리 보기 도구인 Storybook.js가 포함되어 있습니다.

시작하기 전에

명령줄 인터페이스 사용에 익숙하지 않은 경우 명령줄 101 가이드를 참조하십시오.

시스템 요구 사항:

  • Git. Git 문서 참조
  • Node.js v12 이상. 노드 설명서를 참조하십시오.
  • Gulp CLI: Install via npm install --global gulp-cli

Newport Design System 설치:

  1. 명령줄 인터페이스를 사용하여 GitHub에서 vlocityinc/newport-design-system 저장소를 복제합니다. Newport에서 제공하는 구성 요소를 확인하려면 UI/components 디렉터리의 내용을 확인합니다.
  2. 현재 디렉터리를 newport-design-system으로 변경합니다. 
    cd newport-design-system
  3. 올바른 버전의 Salesforce 패키지를 사용하여 작업하려면 해당 지점으로 전환합니다. 
    git checkout release_version
  4. 종속성 설치: 
    npm install
  5. Storybook.js 미리 보기를 시작합니다. 
    npm start
  6. 스토리북 미리 보기를 사용하여 사용 가능한 구성 요소 및 구성을 검토합니다.
  7. 테마에 사용자 정의를 추가합니다. Newport Design System을 사용하여 Omniscript 사용자 정의를 참조하십시오.
  8. 개별 Omniscript에 또는 조직 전체에서 전역적으로 사용자 정의를 적용합니다. Newport Design System을 사용하여 글로벌 스타일링 변경 사항 배포 및 적용을 참조하십시오.

Newport 설계 시스템을 사용하여 Omniscript 사용자 정의

Omniscript의 모양을 사용자 정의하려면 Newport를 복제한 디렉토리의 UI 하위 디렉토리에 있는 CSS 및 HTML 파일을 편집합니다.

테마는 design-tokens 폴더에 저장됩니다. Omniscript에 대한 새 테마 만들기:

  1. vlocity-newport-skin 폴더를 새 폴더에 복사합니다.
  2. 필요에 따라 새 폴더의 파일을 편집합니다.
  3. 색 구성표를 변경하려면 color.yml 파일을 수정합니다. 색상은 aliases/color.yml 파일에 정의된 16진수 RGB 코드 또는 토큰을 사용하여 정의됩니다.
    예를 들어, 입력 요소의 주황색 밑줄과 같은 특정 구성 요소의 색상을 변경하려면 다음을 수행합니다.
    1. design-tokens/vlocity-newport-skin/background-color.yml을 편집합니다.
    2. COLOR_BORDER_INPUT_ACTIVE를 /aliases/color.yml에 정의된 다른 색상 토큰으로 업데이트합니다. 색상을 변경하면 새 포트 구성 요소가 다시 컴파일되므로 미리 보기 권한에 변경 사항이 반영되기까지 약간의 지연이 발생합니다. 변경 사항을 확인하려면 미리 보기 권한자를 사용하여 입력 구성 요소를 봅니다.

      모든 플랫폼에서 최적의 렌더링을 위해 제어 너비를 6로 설정합니다. 더 작은 너비는 모든 플랫폼에서 올바르게 렌더링되지 않을 수 있습니다.

  4. Omniscript에 대한 Newport Design System 스타일의 영향 미리 보기:
    1. 스크립트 구성을 편집하고 최상위 CSS 파일(기본적으로 xxx.css)에 대한 경로를 사용자 정의 HTML 템플릿 필드에 붙여넣습니다.
      Newport 미리 보기에서 데스크톱, 태블릿 및 스마트폰에서 구성 요소가 렌더링되는 방식을 확인할 수 있습니다.
    2. 요소 또는 유틸리티를 미리 보려면 왼쪽 창의 목록에서 선택합니다. 뒤에 있는 코드를 보려면 </>를 클릭합니다.
    3. 구성 요소 계층을 탐색하려면 기본에서 파생 구현에 이르는 요소 정의를 보여주는 제한 트리를 사용합니다.
    4. 특정 정의를 보려면 제한 트리의 해당 노드를 클릭합니다.

Newport Design System을 사용하여 전역 스타일링 변경 사항 배포 및 적용

사용 가능한 위치에서 Newport 테마를 재정의하는 정적 자원을 추가하여 Newport Design System에 수정 사항을 적용합니다. 업로드한 후에는 Newport Design System에 있는 모든 Omniscript에 변경 사항이 적용됩니다.

  1. Newport Design System을 다운로드합니다. Omniscripts에 글로벌 브랜딩 적용을 참조하십시오.
  2. 이 명령을 실행하여 변경 사항이 포함된 배포 폴더를 만듭니다. npm run-script dist
  3. Vlocity Spring '19 이전 버전에서는 (cd)를 dist 폴더로 변경하고 해당 콘텐츠를 압축합니다. (최상위 disting 폴더: cd를 압축하고 해당 콘텐츠를 압축하지 마십시오.)
  4. Salesforce에서 zip 파일을 정적 자원으로 업로드합니다.
  5. Salesforce 조직에서 설정으로 이동하고 빠른 찾기 상자에 사용자 정의 설정을 입력합니다.
  6. UISettings를 찾고 관리 &gt; 신규 를 클릭합니다.
  7. 다음 설정을 구성합니다.
    • 이름: 적용할 변경 사항에 대한 newportZipUrl를 입력합니다.
    • 키: 사용자 정의 이름을 입력합니다.
    • Value: 사용자 정의 스타일을 포함하는 정적 자원의 상대 URL을 입력합니다. 이 URL을 가져오려면 정적 자원(시작하기 전 섹션의 4 참조), 파일 보기 링크 위로 마우스를 이동하고 마우스 오른쪽 단추를 클릭하고 URL을 복사합니다. 도메인 이름 뒤에 상대 URL을 입력하고 끝에 쿼리 문자열(질문 표시)을 제거한 후에 상대 경로만 남깁니다. 예를 들어, 굵은 텍스트가 다음 URL로 복사됩니다. https://MyDomainName--c.vf.force.com/resource/16679825000/vloc_customNewport?
  8. Omniscript에서 Newport 또는 Newport Storybook 테마를 활성화하려면 Omniscript를 열고 디자이너 캔버스 또는 미리 보기 페이지의 드롭다운에서 Newport 또는 Newport Storybook을 선택합니다.

디자이너 캔버스에서 Newport 테마를 선택하면 Omniscript가 미리 볼 때 Newport 테마에 자동으로 나타납니다. 미리 보기 페이지에서 Lightning 전환하면 디자이너 캔버스의 Lightning 테마에 Omniscript가 표시됩니다.

노트
노트

원래 Newport 테마로 구축된 Omniscript의 새 버전을 만들면 기본적으로 Lightning 테마가 선택된 디자이너 캔버스에서 새 버전이 열립니다.

 
로드 중
Salesforce Help | Article