SPFx 1.14 목록 보기 명령 집합 업데이트

SPFx v1.14에는 목록 보기 명령 집합에 대한 몇 가지 매우 흥미로운 기능이 있습니다.

인상 변경

raiseOnChange()는 당신이 생각하는 대로 하지 않습니다. 문서는 ListView의 리플로우 초기화를 약속하지만 목록 보기가 아닌 명령 집합을 업데이트하는 데 사용하도록 되어 있습니다.
참조issue #7811
raiseOnChange()가 약간 지연되어 작동하는 것 같으면 SPO 목록이 정기적으로 콘텐츠를 새로 고치기 때문입니다.

listViewStateChangedEvent

새로 프로비저닝된 프로젝트는 여전히 더 이상 사용되지 않는onListViewUpdated 이벤트를 사용하지만 새 이벤트listViewStateChanged를 사용하도록 코드를 업데이트할 수 있습니다.

CommandSet.ts

public onInit(): Promise<void> {
    this.context.listView.listViewStateChangedEvent.add(this, this.onListViewUpdatedv2);

}
public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void{
}

SPFx v1.15는 업데이트된 템플릿을 사용합니다listViewStateChanged.

특정 목록에 대한 버튼만 표시

특정 목록(예: 여행 요청)에 대한 버튼만 표시한다고 가정해 보겠습니다. 다른 목록에서 숨기려면 현재 컨텍스트에서 목록 제목/URL을 가져와야 합니다.
listViewStateChangedEvent는 첫 번째 렌더링에서 실행되지 않으므로 버튼을 숨기는 데 사용할 수 없습니다. onInit 동안 숨겨야 합니다.

목록 컨텍스트를 반환하는 두 가지 속성이 있습니다.

this.context.pageContext.list.serverRelativeUrl 하지만 목록 컨텍스트를 올바르게 새로 고치지 않습니다

.

this.context.listView.list.serverRelativeUrl 하지만 디버깅할 때

를 반환합니다.

참조issue #7795

따라서 undefined 동안 버튼을 숨기고 onInit 동안 표시하거나 표시하지 않습니다. listViewStateChangedEvent는 버튼이 표시되도록 하기 위해 listViewStateChangedEvent를 호출해야 하는 순간입니다.

CommandSet.ts

public onInit(): Promise<void> {

  const _setCommandsHidden = () => {
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      compareOneCommand.visible = false;
    }
    const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
    if (compareTwoCommand) {
      compareTwoCommand.visible = false;
    }
  }

  _setCommandsHidden();
  return Promise.resolve();
}

public onListViewUpdatedv2(args: ListViewStateChangedEventArgs): void{

  Logger.write("onListViewUpdatedv2");

  const isCorrectList = (this.context.listView.list.title == "Travel requests") ? true : false;
  const itemSelected = this.context.listView.selectedRows && this.context.listView.selectedRows.length == 1;

  let raiseOnChange: boolean = false;

  const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
  if (compareOneCommand && (compareOneCommand.visible != isCorrectList )) {
    compareOneCommand.visible = isCorrectList;
    raiseOnChange = true;
  }

  const compareTwoCommand: Command = this.tryGetCommand('COMMAND_2');
  if (compareTwoCommand && (compareTwoCommand.visible!= (isCorrectList && itemSelected))) {
    compareTwoCommand.visible = isCorrectList && itemSelected;
    raiseOnChange = true;
  }

  if (raiseOnChange) {
    this.raiseOnChange();
  }
}

GitHub에 대한 작업 예제를 참조하십시오.