Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Esta versão apresenta atualizações entre os recursos em torno de Microsoft Viva, Microsoft Teams e SharePoint.
Lançamento: 17 de fevereiro de 2022
Importante
Esta página aborda detalhes relacionados a uma versão SPFx específica. Esta página não inclui pré-requisitos SPFx adicionais que devem ser instalados para desenvolver soluções SPFx, incluindo Node.js, Yeoman e outras ferramentas.
Para saber mais sobre esses pré-requisitos, consulte Configurar seu ambiente de desenvolvimento da Estrutura do SharePoint.
Atualização de projetos da v1.13.1 para v1.14
- No arquivo package.json do projeto, identifique todos os pacotes SPFx v1.13.1. Para cada pacote SPFx:
Desinstale o pacote v1.13.1 existente:
npm uninstall @microsoft/{spfx-package-name}@1.13.1Instale o novo pacote v1.14:
npm install @microsoft/{spfx-package-name}@1.14.0 --save --save-exact
Dica
A CLI do Microsoft 365 fornece uma orientação passo a passo fácil para atualizar suas soluções para a versão mais recente da Estrutura do SharePoint.
Novas características e recursos
Atualizações de extensão de cartão adaptável para Viva Connections
Atualizou o scaffolding ace para Viva Connections
Atualizado o scaffolding da Extensão de Cartão Adaptável para ser mais sucinto.
Obter ViewNavigator Atual para Extensão de Cartão Adaptável
BaseAdaptiveCardExtension.navigator
Se o valor atual renderType for Card retornará BaseAdaptiveCardExtension.cardNavigator. Se o valor atual renderType for QuickView retornará BaseAdaptiveCardExtension.quickViewNavigator.
Listar Atualizações do Conjunto de Comandos de Exibição
Informar ListView sobre alterações no conjunto de comandos
BaseListViewCommandSet.raiseOnChange: () => void
Use esse método para disparar onChange evento e inicializar um refluxo de ListView.
Estado do Acessador do Modo de Exibição de Lista Expandido
ListViewAccessor fornece o estado expandido da exibição de lista atual. As Novas propriedades de estado estão listadas abaixo.
rows- linhas renderizadas atualmente na exibição de lista.selectedRows- linhas selecionadas na exibição de lista.list- informações básicas sobre a lista renderizada pela exibição de lista.view- informações básicas sobre a exibição renderizada pela exibição de lista.folderInfo- informações da pasta para a exibição de lista.appliedFilters- filtros aplicados à exibição de lista.sortField- nome do campo de classificação.sortAscending- especifica se a exibição de lista é classificada em ordem crescente ou decrescente.
Evento de Alteração do Estado de Exibição de Lista
ListViewAccessor.listViewStateChangedEvent: SPEvent<ListViewStateChangedEventArgs>
Esse evento é gerado sempre que o estado da exibição de lista é alterado. Os argumentos contêm o tipo de evento ocorrido (confira ListViewAccessorStateChanges) e o estado anterior da exibição de lista (confira IListViewAccessorState).
A Propriedade de Comando do Conjunto de Comandos de Lista está Desabilitada
Command.disabled: boolean | undefined;
Atualizações específicas da Web Part
Grupo de Seletor de Web Part Predefinido para Web Parts em Desenvolvimento
PredefinedGroup.Local = '8b7bf6f1-a56a-4aa3-8657-7eb6e7e6af61';
O grupo exibe Web Parts depuradas localmente.
Retorno de Chamada para Limpar o Elemento DOM Antes de Carregar o Indicador ou Exibir o Elemento de Erro
IClientSideWebPartStatusRenderer.displayLoadingIndicator(domElement: Element, loadingMessage: string, timeout?: number, clearDomElementCallback?: ClearDomElementCallback): void;
IClientSideWebPartStatusRenderer.renderError(domElement: HTMLElement, error: Error | string, clearDomElementCallback?: ClearDomElementCallback);
Use clearDomElementCallback para limpar o nó DOM.
Método de ciclo de vida da Web Part para alterações de tema
BaseClientSideWebPart.onThemeChanged(theme: IReadonlyTheme | undefined): void;
Quando um tema é inicializado ou alterado em uma página, onThemeChanged será invocado com o novo tema.
Importante
render não deve ser invocado em onThemeChanged. A chamada render pode levar a um re-fluxo não previsto da Web Part. render será automaticamente invocado, se necessário.
Modelos de Web Part atualizados
- Nenhum modelo do Framework e do React são atualizados com a nova interface do usuário amigável
- Novo modelo "Mínimo" é adicionado: permite iniciar o desenvolvimento com a quantidade mínima de código provisionado.
Outras atualizações e alterações genéricas
Alterações em Opções e Prompts de Scaffolding
Os próximos prompts foram preteridos para os seguintes padrões:
- Descrição da solução
- Versão do ambiente (Microsoft Office SharePoint Online)
- Implantação em todo o locatário
- Permissões isoladas
- Descrição do componente
Detectar se um componente está carregando do localhost
BaseComponentContext.isServedFromLocalhost(): boolean;
Qualquer componente SPFx agora pode verificar se ele está sendo executado no momento a partir do código servido localmente.
Ocultar um nome de grupo do Painel de Propriedades
IPropertyPaneGroup.isGroupNameHidden?: boolean;
isGroupNameHidden pode ser usado para ignorar a renderização do nome do grupo do Painel de Propriedades para evitar que um cabeçalho de grupo vazio seja exibido.
O valor padrão de isGroupNameHidden é falso.
Propriedade ipAddress em serve.json
A nova propriedade ipAddress foi adicionada à serve.json configuração. Esse parâmetro é útil ao usar contêineres do Docker. Por exemplo, para definir o host de serviço como '0.0.0.0'.
Essa propriedade será usada explicitamente para encerrar o servidor, o que significa que todas as URLs de depuração e configurações de webpack não serão afetadas.
Recursos e Capacidades de Visualização
Os recursos a seguir ainda estão em status pré-visualização como parte da versão 1.14 e não devem ser usados em produção. Queremos lançá-los oficialmente como parte da próxima versão 1.15.
Cache de exibição de cartão Extensões de Cartão Adaptável
Para melhorar o desempenho, o SPFx agora suporta o armazenamento em cache local das exibições de cartão da Extensão de Cartão Adaptável. A exibição do cartão armazenado em cache será renderizada imediatamente ao carregar sua Extensão de Cartão Adaptável. Após o carregamento da Extensão de Cartão Adaptável, ela pode atualizar opcionalmente a exibição do cartão.
interface ICacheSettings {
/**
* Whether cache is enabled. Default: true
*/
isEnabled: boolean;
/**
* Expiry time in seconds. Default: 86400 seconds (24 hours)
*/
expiryTimeInSeconds: number;
/**
* Returns the Card View used to generate the cached card.
* By default, the currently rendered Card View will be used to cache the card.
*/
cachedCardView?: () => BaseCardView;
}
BaseAdaptiveCardExtension.getCacheSettings(): Partial<ICacheSettings>;
Por padrão, o cache é habilitado com configurações padrão. Uma Extensão de Cartão Adaptável pode personalizar suas configurações de cache substituindo getCacheSettings para retornar as configurações que deseja substituir.
Quando a última exibição de cartão conhecida não deve ser armazenada em cache, você pode fornecer uma exibição de cartão específica para ser armazenada em cache e exibida na próxima página de carregamento através de ICacheSettings.cachedCardView. Essa exibição de cartão não precisa ser registrada previamente.
Uma Extensão de Cartão Adaptável também pode armazenar em cache localmente seu estado atual. Por padrão, nenhum estado é armazenado em cache.
BaseAdaptiveCardExtension.getCachedState(state: TState): Partial<TState>;
Se getCachedState for substituído, os valores armazenados em cache serão fornecidos quando a Extensão de Cartão Adaptável for inicializada na próxima carga de página.
onInit tem uma nova sobrecarga, que passa informações sobre o estado do cartão em cache. Se o cartão não foi carregado de uma exibição de cartão em cache, então cachedLoadParameters será undefined.
interface ICachedLoadParameters {
state: TState;
}
BaseAdaptiveCardExtension.onInit(cachedLoadParameters?: ICachedLoadParameters): Promise<void>;
O estado inicial da Extensão de Cartão Adaptável pode ser propagado a partir do estado em cache. O estado em cache também pode ser usado para determinar se qualquer lógica adicional precisa ser executada.
O cache de estado e o tempo de expiração do cache podem ser usados para determinar quando chamadas remotas caras precisam ser feitas pela Extensão de Cartão Adaptável.
O cache pode ajudar a melhorar significativamente o desempenho percebido para sua Extensão de Cartão Adaptável.
Método do Manipulador de Erros. Esse método será invocado quando uma Ação gerar um erro
BaseView.onActionError(error: IActionErrorArguments): void
Substitua este método para tratar erros de ações de Cartão Adaptável.
Novos tipos de Ação para mídia e geolocalização
Observação
Essas novas ações estão disponíveis apenas no navegador no momento. Viva Connections desktop e Viva Connections suporte móvel serão habilitados posteriormente.
Depois da Disponibilidade Geral, a matriz de suporte para ações terá a seguinte aparência:
| Action | Área de Trabalho de Conexão do Viva | Viva Connections Mobile | Navegador |
|---|---|---|---|
| Selecionar Mídia | Com suporte | Com suporte | Com suporte |
| Obter Localização | Não suportado | Com suporte | Com suporte |
| Mostrar Local | Não suportado | Com suporte | Com suporte |
ISPFxAdaptiveCard.actions?: (
| ISubmitAction
| IOpenUrlAction
| IShowCardAction
| ISelectMediaAction // Raise a file picker or native media picker
| IGetLocationAction // Get a location
| IShowLocationAction // Show a location on a map
)[];
A ação SelectMedia e Location pode ser configurada conforme mostrado abaixo:
actions: [
{
type: 'VivaAction.SelectMedia',
id: 'Select File',
parameters: {mediaType: MediaType.Image, allowMultipleCapture: true, maxSizePerFile : 200000, supportedFileFormats: ['jpg']},
title: 'Select File'
},
{
type: 'VivaAction.GetLocation',
id: 'Get Location',
parameters: {chooseLocationOnMap: true}
}
{
type: 'VivaAction.ShowLocation',
id: 'Show Location',
parameters: parameters: {locationCoordinates: {latitude: 40, longitude: 40}}
}
]
As ações serão renderizadas como abaixo
Ação de Localização:

Ação Selecionar Media:

A Ação de Localização pode ser usada para obter sua localização atual, mostrar sua localização atual ou personalizada em um mapa e escolher sua localização atual em um mapa. No navegador, ela usa o Bing Mapas como interface de mapeamento:

A Ação Selecionar Mídia pode ser usada para selecionar imagens do seu dispositivo nativo. No navegador, ela usa o seletor de arquivos para ajudar a acessar os arquivos relevantes:

API auxiliar de imagem
A classe estática ImageHelper (em @microsoft/sp-image-helper) foi adicionada para permitir acesso ao runtime de desenvolvedores do SPFx a:
- URLs de imagens em miniatura geradas automaticamente de páginas e documentos armazenados no Microsoft Office SharePoint Online
- URLs mais otimizadas para imagens armazenadas no Microsoft Office SharePoint Online
Saiba mais: API auxiliar de imagem
Substituição e itens removidos nesta versão
Importante
Qualquer solução existente que esteja usando APIs removidas continuará funcionando sem problemas. A remoção significa que você não pode criar novas soluções que estejam usando estas APIs.
- APIs preteridas de
@microsoft/sp-listview-extensibility:BaseListViewCommandSet.onListViewUpdated
- APIs preteridas de
@microsoft/sp-core-libraryEnvironmentType.Local
- APIs preteridas removidas de
@microsoft/sp-httpGraphHttpClientGraphHttpClientConfigurationGraphHttpClientResponseIGraphHttpClientConfigurationIGraphHttpClientConfigurationsIGraphHttpClientOptions
- APIs de visualização removidas de
@microsoft/sp-webpart-baseISDKs.officeIOffice
Problemas Corrigidos
Período de tempo de novembro a fevereiro
- nº 5131 - Tokens de tema em arquivos SCSS no SPFx 1.10.0 não funcionam mais
- nº 4808 - SPFX e react-dnd
- nº 4587 - As seções em segundo plano terão suporte em web parts isoladas do domínio (recurso disponível para spfx 1.8.2 em postes)
- nº 4550 - Página de aplicativo de parte única não impede a navegação quando há alterações não salvas
- nº 5098 -
this.context.propertyPane.open()abre dentro do iframe em webparts isoladas - nº 5227 - Falha na navegação quickLaunch (para SinglePageWebParts)
- nº 6779 - Os personalizadores de aplicativo aparecem na guia de equipe "Listas" depois de adicionar o item à lista
- nº 5787 - Verificar a Permissão de Máscara Completa e o Limite de Bitwise JS
- nº 872 - SPFx: não é possível exibir erros de instalação
- nº 6253 -
pageContextnão é atualizado nos personalizadores de aplicativos na navegação embutida - nº 6102 - A seção web part de reação completa não renderiza ícones
- nº 7536 - Link profundo do ACE Teams não navegando para a guia Específica
- nº 6343 - A visualização não é exibida para a Web Part em um modo de página única
- nº 7079 -
Guid.tryParse()não está funcionando - #7558 – Projeto SPFx v1.13.1 padrão recomenda extensão VSCode preterida desnecessária &
- nº 6854 - Chamar
clearLoadingIndicatorremove WebPart inteira - nº 3219 - Adicionar o Personalizador de Aplicativos ao Projeto de Web Part existente faz com que as Web Parts não sejam implantadas
- nº 3830 - "A parte especificada não existe no pacote" ao provisionar o docx no
elementFiles - nº 3840 - Algo deu errado ao implantar ativos do spfx
- nº 4294 -
isGroupNameHiddenexcluído deste tipo de versão - nº 4680 - SPFx 1.9.1, office-ui-fabric-react e sp-property-pane
- nº 6232 - Obter erros sobre o
<div>não pode ser aninhado no<p>ao examinar dados da Web Part no ambiente de teste do workbench - nº 7386 - A compilação falha ao definir
skipFeatureDeploymentcomo true - #7691 - 1.13.1 TypeError: Não é possível ler a propriedade 'toJSON' de undefined ao empacotar/servir um grande projeto