Repeating Group 클릭 시 정보 수정 팝업 띄우기

리피팅 그룹을 유저가 클릭 했을 때 해당 데이터를 수정할 수 있는 팝업 띄우는 방법

 

리피팅 그룹은 데이터 목록을 유저에게 보여줄 수 있어 다양하게 활용하실 수 있는데요. 다음과 같이 유저가 리피팅 그룹 내 데이터를 수정할 수 있도록 하실 수 있습니다.

리피팅 그룹(폴더 리스트)에서 '구글' 폴더를 수정한다고 가정할게요.

 

수정 버튼을 클릭하면 위 그림과 같이 팝업이 뜹니다. Input 요소에 클릭했던 폴더의 이름인 '구글', 색상인 '화이트'가 미리 지정되어 있습니다. 이걸 '페이스북', '그린'색상으로 변경하면,

 

이렇게 변경됩니다. 과정을 정리하자면 다음과 같습니다.

 

 

1) 리피팅 그룹 내 데이터 클릭

2) 수정 팝업의 state 설정 (데이터 끌어오기)

3) 수정 팝업 표시 (끌어온 데이터 표시하기)

4) 팝업 내에서 데이터 수정 후 수정 버튼 클릭

5) 데이터 수정

 

 

 

 

1. 수정 팝업 만들기

위 그림과 같이 수정할 데이터를 지정하는 요소(Input)를 팝업에 넣어주세요.

그리고 폴더의 에딧창 우측 상단의 '!' 클릭 후 Custom states를 설정합니다.

예시의 경우 Input요소의 Content format, 즉 데이터 타입이 Text이기 때문에

state의 데이터 타입도 동일하게 Text로 지정하고 폴더 이름을 state로 넣었습니다.

 

2. Initial Content 지정

'Initial Content'는 Input 요소에 유저가 값을 입력하기 전에 미리 값을 지정해놓을 수 있는 기능입니다.

수정하려는 데이터가 미리 들어가 있으면 유저 입장에서 자신이 수정하려는 데이터가 무엇인지 인지할 수 있어 좋은 경험을 줄 수 있습니다.

여기에 1)에서 지정한 state값을 넣습니다. 클릭한 데이터 내의 원하는 값을 state에 넣는 것입니다.

 

 

3. 리피팅 그룹 클릭 시 팝업의 state 설정

리피팅 그룹에서 특정 데이터를 클릭하면 데이터가 수정되어야 하기 때문에, 데이터 클릭 워크플로우를 지정합니다.

action에서 'Element Actions' -> 'Set state'를 선택하고,

 

1)에서 state를 지정한 요소 즉, 팝업을 선택하고 지정한 Custom state를 선택한 뒤 value 값에서 parent group's item value를 넣어줍니다. 

예시는 제가 설정한 구조에 맞게 표시된 것이기 때문에 리피팅 그룹 내의 원하시는 값을 지정해주세요.

리피팅 그룹 클릭 이후의 액션이기 때문에 클릭한 리피팅 그룹 내의 값을 불러올 수 있습니다.

그리고 다음 스텝에서 수정 팝업 보여주기(element action - show element)를 지정해주세요.

 

 

4. 데이터 수정하기

팝업의 수정 버튼 클릭 시 워크플로우 지정해주세요

액션에서 'Data' -> 'make changes to thing'으로 수정할 내용을 다음과 같이 지정하시면 됩니다.

데이터를 수정하려면 먼저 수정할 데이터를 특정해야 합니다.

'thing to change'에서 수정하시려는 데이터를 'do a search for'로 넣으시고

'Add a new constraint'에서 해당 데이터를 찾을 수 있는 데이터 필드 필터를 걸어주세요.

위 예시에서 저는 따로 데이터의 ID를 지정해 필터를 걸었지만, 데이터를 특정할 수 있는 필드면 뭐든 가능합니다.

3)에서 설정한 state인 이름도 지정할 수 있고요.

데이터를 특정했다면 이제 수정해야겠죠.

'+ change another field'를 클릭하시면 데이터 필드를 선택하실 수 있는데요.

여기서 수정 팝업의 input요소의 값을 지정해주시면 됩니다. :)

 

그리고 수정을 완료했다면 다음 스텝에서 'navigation - refresh the page'로 페이지를 새로고침 하면 데이터 수정이 더 자연스럽게 유저에게 표시될 수 있습니다.