본문으로 건너뛰기
  1. Posts/

Thingworx Login Page Customization

·1 분· loading · loading ·
작성자
Yerin Choi
Developer of Innofactory.

Thingworx Login Page Customization
#

Thingworx 설치 후 서버에 접속하면 Thingworx는 아래와 같은 Basic Authentication Login 화면을 제공합니다.

본 화면을 통해 Thingworx에 로그인해도 되지만, Thingworx에서 제공하는 간단한 Login Custom 기능으로 로그인 페이지를 자유롭게 구성할 수 있습니다.

이 글은 Thingworx 모델 요소인 Organization, Style Definition 개념에 대해서는 설명하지 않습니다.

Organization 생성 및 로그인 화면 구성
#

로그인 페이지는 Thingworx Organization에서 구성할 수 있습니다. Organization 하나를 생성합니다.

Innofactory라는 이름의 Organization을 생성하였습니다. (※이름과 Project는 필수 요소입니다.)

Organizaion의 해당 속성을 통해 Login Page를 Custom 할 수 있습니다.

  • Login Prompt : 로그인 페이지의 간단한 설명

  • Login Image : 로그인 페이지에 들어갈 대표 이미지

  • Login Style : 로그인 페이지의 전체적인 Style

  • Login Button Style : 로그인 페이지 버튼 Style

  • Allow Password Reset : 비밀번호 재설정 기능 사용 여부

예시로 이와같이 구성하였습니다. 이제 Innofactory의 구성원을 추가해야 합니다.

Organization tab에서 위와 같이 Innofactory 조직의 구성원을 추가합니다. 조직 구성원은 사용자 혹은 그룹 단계로 추가할 수 있습니다.

<server name>/Thingworx/FormLogin/<Organization Name>

해당 주소를 통해 이제 Innofactory 조직 구성원은 위와 같은 로그인 화면에서 로그인이 가능해집니다. 이 기능을 활용하면 조직 별, 구성원 별로 다른 로그인 화면을 생성할 수 있습니다.

Thingworx에서 제공하는 Login Custom 기능 이외에 직접 Login Page를 구성하는 내용은 차후 포스팅에서 다루도록 하겠습니다.

참고 URL: Creating Login Page Forms for Organization - PTC Support

관련 글

Thingworx Extension Third-Party JavaScript Libraries Tip
·1 분· loading · loading
Yna
Thingworx Extension # Thingworx Extension으로 Third-Party Javascript Libraries를 사용하는 방법은 Thingworx Document에 다음과 같이 소개되어 있습니다. if (!jQuery().qtip) { $("body").append('<script type="text/javascript" src="../Common/extensions/MyExtension/ui/mywidget/ include/qtip/jquery.qtip.js"></script>'); $("head").append('<link type="text/css" rel="stylesheet" href=" ../Common/extensions/MyExtension/ui/mywidget/include/ qtip/jquery.qtip.css" />'); } Thingworx widget Extension을 만들 때, 아래 코드와 같이 renderHtml 함수에 추가하여 사용하는 방법을 제시하고 있습니다. this.renderHtml = function() { ... if(!jQuery().ptccommonhighchart){ this.body_append( '<script type="text/javascript" src="../Common/extensions/<project>/ui/<widget>/lib/highcharts.js"></script>'); } } 이렇게 사용할 경우 종종 Thingworx Runtime 시에 Third-Party Javascript libraries에 정의되어 있는 기능이 정의되지 않았다고 에러가 발생하곤 합니다.