이번에는 선택한 옵션을 오른쪽부분에 표시하도록 해보겠습니다.
대략적인 틀은 다음과 같습니다.
List로 2개의 구역을 만들어 한개의 List에는 선택옵션을 표시, 다른하나의 List에는 필수옵션을 표시입니다.
아래와 같이 컨테이너와 List를 만들어줍니다.
그리고 List에 If 위젯을 넣어줍니다. If 위젯의 조건(Condition)에 다음과 같이 작성해줍니다.
GetProductOptionsByProductId.List.Current.ProductOption.Check = True
만약 각각의 선택사항옵션의 Check 속성의 값이 True라면 해당 값을 표시해주도록 하였습니다.
해당옵션의 이름과 가격도 마찬가지로 True안에 넣어주었습니다.
첫번째 Exrpession의 값입니다.
GetProductOptionsByProductId.List.Current.ProductOption.OptionName
두번째 Expression의 값입니다.
GetProductOptionsByProductId.List.Current.ProductOption.OptionPrice
위와 똑같이 필수선택사항옵션도 만들어줍니다.
똑같이 If위젯을 사용하여 조건(Conditon)에 다음과 같이 작성해줍니다.
GetProductMustOptionsByProductId.List.Current.ProductMustOption.Check = True
그리고 True안에 Expression의 값으로
GetProductMustOptionsByProductId.List.Current.ProductMustOption.Label
선택한 필수옵션을 표시하도록 해주었습니다.
결과화면
처음화면입니다.
여기서 면곱배기를 눌러보겠습니다.
여기서 필수선택사항중에 udong을 클릭해보겠습니다.
여기서 치즈추가도 눌러보겠습니다. 값들이 정상적으로 잘 표시됨을 볼 수 있습니다.
다음에는 해당 속성들의 값들을 다 계산하여 합계로 표시해보겠습니다.
'로우코드(Lowcode) > OutSystems프로젝트' 카테고리의 다른 글
outsystems - 협력회사 방문기 (2) | 2023.05.26 |
---|---|
outsystems - 5.4 선택옵션클릭,해제시 값변경, 총가격표시 (0) | 2023.05.24 |
outsystems - 5.2 해당메뉴의 필수옵션(radio widget) (0) | 2023.05.24 |
outsystems - 5.1 해당메뉴의 상세옵션(check box) (0) | 2023.05.23 |
outsystems - 5.상세화면설계(메뉴 id전달) (0) | 2023.05.22 |