outsystems - 5.5 필수옵션

문제점

아래의 사진처럼 상세옵션스크린을 보면 

필수옵션이라는 항목이 있습니다. 필수옵션 항목은 하나의 옵션만 선택 가능해야합니다. 

저번에 이 필수옵션을 https://myeongsu0257.tistory.com/106

outsystems - 5.2 해당메뉴의 필수옵션(radio widget)

위의 포스팅에서처럼 List에 Radio group을 구성하는 방식으로 진행했었는데

위의 방식은 필수옵션의 여러가지 항목을 선택하는 오류가 발생했습니다. 

구성을 보면  List - > Radio group -> Radio button 으로 구성했었는데 위의 구성때문에 중복으로 선택이 가능했습니다. 

 

중복이 안되게 하려면

Radio group -> List -> Radio button 의 형식으로 구성을 해야하는데 Outsystems에서는 이러한 방식을 지원하지는 않았습니다. 그래서 해결법을 찾다가 도저히 떠오르지 않아 멘토분의 도움을 받았습니다.

 

 

해결

먼저 블록으로 필수옵션 부분을 보이도록 하였습니다. 블록의 구성은 아래와같습니다.

Radio widget을 사용하지 않고

checkbox를 사용하였는데 checkbox의 styles속성을 조정하여 radio-button의 모양을 해주었습니다. 

 

 

그리고 List의 Source에는 필수옵션 Entity를 설정해주었고

체크박스아이콘옆에 Expression위젯으로 필수옵션의 Label(이름)을 위치시켜주었습니다. 

 

 

그리고 블록에서의 필수옵션엔터티입니다.

아래처럼 구성이되어있습니다.

 

Check box를 클릭하였을때 Variable(사용자가 선택한 옵션이 저장될 위치)에는

GetProductMustOptionsByProductId.List.Current.IsSelected

의 값을 설정해주었습니다. 위의 IsSelected 속성의 기본값은 False로 구성되어있습니다.

 

즉 체크박스에 해당 옵션이 선택된경우 해당옵션의 IsSelected 값이 True로 변경됩니다. 

 

 

Acton

그리고 버튼을 클릭할때 Action을 설정해주었습니다. 

매개변수는 아래와 같이 2개를 만들어주었고 다음과 같은 값들을 넘겨주었습니다.

 

ProductId에는 GetProductMustOptionsByProductId.List.Current.ProductMustOption.Id 선택한 옵션의 Id를

NewOption에는 GetProductMustOptionsByProductId.List.Current.ProductMustOption.Label 선택한 옵션의 Label(이름)

 

 

Action - Logic

Action 안의 Logic의 구성입니다. 

먼저 처음에 Event를 트리거해주었습니다. 

 

트리거를 자세히 보면

트리거안의 매개변수인 Name에는 부모에전달할 값을 넣어줘야 하기 때문에

NewOption 즉 선택한 옵션의 Label(이름)을 선택해주었습니다. 

그리고 해당블록에서 핸들러를 등록해줍니다. 

왼쪽의 Name은 핸들러에 있는 입력매개변수이고

오른쪽의 Name은 위에서 생성한 입력매개변수입니다(선택한 옵션의 라벨(이름)이 담겨있는)

 

 

MustOptionLabel이 최종적으로 상세옵션 스크린에서 선택한 옵션이 보여지는 변수입니다.

따라서 이 변수에 트리거 이벤트에서 전달할 Name(선택한 옵션 라벨)을 전달해줍니다.

 

 

 

다시 돌아와서 

이벤트를 트리거(상위블록에게 값전달) 후

다른 선택사항으로 수정할 수 있기때문에 아래와 같은 로직을 수행해줍니다. 

 

먼저  ListIndexof라는 Outsystems자체의 액션을 가져와서 사용합니다.

이액션이 뭐냐면

 

" 주어진 조건을 만족하는  List 매개변수의 첫 번재 요소의 위치를 반환하며, 조건을 만족하는 요소를 찾지 못한 경우 -1을 반환합니다"라고 명시되어있습니다.

 

해당액션의 속성을 보면 아래와 같습니다.

 

먼저 해당 속성의 속성들을 설명해보면

• List속성(유형 : 레코드리스트)에는 조건을 적용할 요소가 포함된 리스트가 담깁니다.
• Conditon속성(유형 : Boolean형)에는 리스트의 각 요소에 대해 확인할 조건 표현식입니다. 
• Postin(유형: 정수형)이라는 변수는 주어진 조건을 만족하는 리스트의 첫번째 요소의 위치입니다. 조건을 만족하는 요소를 찾지 못한 경우 -1입니다. 

 

즉 Conditon(조건)에 적힌 요소를 찾지 못하면 -1을 반환합니다. 

조건은 다음과 같이 작성해줍니다.

IsSelected and ProductMustOption.Id <> ProductId

   

IsSelected는 새로운 옵션을 선택하는경우 True가 되고 기존의 선택한 옵션을 또 클릭하면 항상트루?

 

ProductMustOption.Id <> ProductId은 항상 같지 않기때문에 참(항상같은경우는 우동?)

 

 

즉 IsSelected가 True이고 동시에 ProductMustOption의 Id와 ProductId가 서로 다른경우에만 참이 됩니다. 

      

 

액션다음으로 If문을 수행합니다. 

If의 조건은 다음과 같습니다.

ListIndexOf_PreviousSelected.Position <> -1

 

<>는 같지않다라는 뜻입니다. 즉 같지않으면 참입니다. 

Postion은 위에 나와있듯이 주어진 조건을 만족하는 리스트의 첫번째 요소의 위치입니다.

즉 쉽게말해, 조건을 만족하는 요소를 찾지 못한 경우 -1을 반환합니다. 

 

Postion이 위의 액션의 조건을 만족하지 못한 경우 경우 True가 됩니다. 

 

 

 

그리고 True의 Assgin에  아래의 IsSelected를 선택해주고 값으로 False를 해줍니다. 

 

GetProductMustOptionsByProductId.List[ListIndexOf_PreviousSelected.Position].IsSelected

위의 값은 이전 옵션의 IsSelected 입니다.

 

 

로직정리

즉 로직의 흐름을 보면 

이전에 선택된 옵션이 있고 새로운 선택옵션을 선택할 경우 

이전의 옵션의 IsSelected가 True에서 False로 변경되기 때문에 새롭게 선택한 옵션만 선택이 된다 입니다. 

 

 

 

 

결과

우동선택한경우

 

소바로 선택