Outsystems

[Screen Widget] Link와 Button 사용하기

기록해연 2025. 2. 24. 11:29

https://learn.outsystems.com/ko-kr/training/journeys/web-developer-662/demo-how-to-use-a-link-and-button-widgets/o11/571

 

링크와 버튼은 비슷하게 사용할 수 있음. 가끔 차이점이나 같은점 물어보는 문제가 있어서 비교차 적어봄.

Link는 폼 내부에 넣어도 별다른 영향 없으나, Button은 기본적으로 폼 제출(Submit) 기능.

  • Link 사용
    • 페이지 이동이 목적일 때 (예: 홈, 마이페이지, 로그인 페이지 이동)
    • 외부 URL로 이동해야 할 때 (www.google.com 같은 외부 링크)
    • 네비게이션 메뉴에 사용할 때
  • Button 사용
    • 데이터를 저장하거나 폼을 제출할 때 (제출, 등록, 저장 버튼)
    • 특정 이벤트를 실행할 때 (예: 검색, 파일 업로드, Ajax 요청 등)
    • API 호출이 필요할 때 (예: 로그인, 결제 요청 등)

데모(버튼)

 

Button 의 On Click 이벤트를 현재화면으로 하고 Number에 +1 하도록 설정.

 

버튼 옆에 Input Parameter를 드래그앤드롭하여 화면에 보이도록 만듬.

 

증가 버튼을 눌러 숫자가 +1 되는지 확인

 

새로운 버튼을 만들고 Button선택버튼에서 오른쪽 마우스 클릭 > Link to > New Screen 선택

새 화면 명은 Result로 설정

신규페이지 Input Parameter 로 Value 생성. 타입은 Integer로 변경.

 

캔버스에 드래그앤드롭으로 Value 출력되도록 만듬.

제출 버튼 클릭시 Value로 Number를 전달하도록 설정.

화면에서 화면으로 값이 제대로 전달된 것 확인.

 


데모(링크)

 

드래그앤드롭으로 [돌아가기] 링크 위젯을 화면에 추가.

온클릭시 Calculator화면으로 이동하도록 설정.

 

 

증가 후 제출하여 화면이동했다가 돌아가기 클릭

 

초기화된 화면 출력됨.