Visão geral e objectivo
Fora da caixa, MUSGO’ Web Part de consulta de conteúdo (CQWP) exibe seus resultados em um formato de lista, semelhante ao resultados da pesquisa. Também é possível exibir os resultados em um formato de grade (ou seja. Tabela HTML). Formatos de grade são melhores em algumas circunstâncias. Descrevo como conseguir esse efeito neste artigo.
Cenário de negócios
Já trabalhei com um cliente em uma distribuição de musgo de toda a empresa. Nós projetamos sua taxonomia tal que projetos são cidadãos de primeira classe na hierarquia e tem seu próprio site de nível superior. Gerentes de projeto mantém uma lista de singleton de informações de resumo do projeto, como o título, orçamento, Data de conclusão prevista, restante orçamento e outros campos de tipo de resumo. Por "singleton" Quero dizer uma lista de SharePoint personalizada garantida para conter apenas um item. Forma simplista, Ele se parece com isso:
A abordagem técnica é o mesmo descrito here (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). O CQWP usa uma transformação XSL para emitir o HTML para o navegador para processar.
Eu sempre imagino o resultado antes de mergulhar o XSL porque XSL é um pesadelo. Aqui está o meu resultado desejado:
HTML como este gera esse resultado:
|
|
<HTML>
<corpo>
<Centro>
<tabela fronteira= 1>
<!-- Rótulos->
<TR bgcolor= azul>
<TD><fonte Cor= branco><b>Nome do projeto</b></fonte></TD>
<TD alinhar= direita><fonte Cor= branco><b>Data completa</b></fonte></TD>
<TD alinhar= direita><fonte Cor= branco><b>Orçamento</b></fonte></TD>
<TD alinhar= direita><fonte Cor= branco><b>Despesas reais</b></fonte></TD>
<TD><fonte Cor= branco><b>Status geral</b></fonte></TD>
</TR>
<TR>
<TD>Sala de computadores re-Wire.</TD>
<TD alinhar= direita>02/01/08</TD>
<TD alinhar= direita>22,500.00</TD>
<TD alinhar= direita>19,000.00</TD>
<TD>Em andamento</TD>
</TR>
<TR>
<TD>Provisionar servidores para atualizar o SQL</TD>
<TD alinhar= direita>04/01/08</TD>
<TD alinhar= direita>7,500.00</TD>
<TD alinhar= direita>0.00</TD>
<TD>Planejado</TD>
</TR>
</tabela>
</Centro>
</corpo>
</HTML>
|
Abordagem
Siga estas etapas para criar a grade:
- Identificar os componentes da grade (linhas/colunas).
- Definir e criar colunas de site necessárias.
- Criar páginas para os projetos e listas de singleton.
- Adicionar o CQWP a uma página da web e configurá-lo para pesquisar suas listas.
- Modificar o XML do CQWP para reunir-se as colunas adicionais.
- Modificar o XSL para gerar uma tabela.
Vou concentrar-me no número 6. Números de um a quatro são direta e algo que qualquer usuário CQWP já feito. O número cinco tem sido bem documentado por outros, incluindo este artigo carga exaustivo de screen shot do MSDN here (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) blog do Heather Salomão e here (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
Porcas e parafusos
Iniciar e implementar as etapas de um a cinco de acordo com a documentação do MSDN e artigo Heather Solomon.
Neste ponto, você adicionou seu CQWP para a página e você tem seu <CommonViewFields> configurado conforme necessário.
Seguindo os passos habituais, Posso obter estes resultados intermédios:
1. Criar um tipo de conteúdo, uma lista personalizada modelos para esse tipo de conteúdo e dois sites. Aqui é o tipo de conteúdo:
Aqui é a estrutura do site:
2. Adicionar o CQWP depois de criar meu projeto subsites e singleton listas de resumo do projeto:
3. Adicionar todas as informações adicionais que eu quero através da <CommonViewFields>:
<Propriedade nome="CommonViewFields" tipo="Cadeia de caracteres">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</Propriedade>
Nota que eu tinha que manter todos os campos de propriedade em uma linha ou não iria funcionar (CQWP me diria que a consulta não retornou nenhum item).
4. Neste ponto, Estamos prontos para ir além do artigo do MSDN e aleta sobre sobre artigo de Heather Solomon. Siga seus passos, começando próximo passo #5 para criar um personalizado / unghosted versão de ItemStyle. Eu seguir o Conselho de Heather, para cima até a etapa 11 e obter estes resultados intermédios:
4.1: Meu modelo de XSL nome da seguinte forma:
<XSL:nome do modelo = "grade" corresponder = "linha[@Style = 'Grid']" modo = "itemstyle">
Eu também ligeiramente modificá-la sugeriu <XSL:for-each …> Adicionando um <DRI> marca para fornecer uma listagem mais limpa:
<XSL:for-each Selecione="@*">
P:<XSL:valor da Selecione="nome()" /><br/>
</XSL:for-each>
4.2: Posso modificar a web part, ir para a aparência e selecione minha grade"" estilo:
Aplicar a alteração e aqui está o resultado:
Do acima exposto podemos ver que os campos que nós queremos (Nome do projeto, despesas, estatuto, etc) estão disponíveis para nós usarmos quando emitimos o HTML. Não só isso, Mas vemos os nomes pelos quais nós deve fazer referência a essas colunas na XSL. Por exemplo, podemos fazer referência Status do projeto como "Project_x005F_x0020_Name".
Neste ponto, Devemos afastar-se do blog de Heather e de ombros destes gigantes, Posso adicionar meu próprios pouco.
ContentQueryMain.xsl
OBSERVAÇÃO: Ao fazer alterações em tanto ContentQueryMain.xsl como ItemStyle.xsl, você precisa verificar que os arquivos de volta em antes de ver o efeito das alterações.
Para fins de tomada de grade, MOSS usa dois diferentes arquivos XSL para produzir os resultados que vemos de um CQWP. Para gerar o bit anterior da saída, Nós modificamos ItemStyle. MOSS, na verdade, usa outro arquivo XSL, ContentQueryMain para, em conjunto com ItemStyle para gerar o HTML. Como seu nome implica, ContentQueryMain.xsl é o principal"" XSL que controla o fluxo global de tradução. Ele percorre todos os itens encontrados e passa-los um por um para modelos em ItemStyle. Modificaremos ItemStyle para gerar a céu aberto <tabela> etiqueta antes de emitir a primeira linha de dados e o fechamento <tabela> etiqueta depois de emitir a última linha. Para realizar essa tarefa, ContentQueryMain.xsl é modificado para passar dois parâmetros para nossa grade"" modelo em ItemStyle.xsl, "última linha" e a "linha atual". ItemStyle usa essas condicionalmente emitir as etiquetas necessárias.
Usando a técnica do Heather Salomão, Podemos localizar ContentQueryMain. Situa-se no mesmo lugar como ItemStyle. Esta captura de tela deve ajudar:
Temos de fazer as seguintes alterações:
- Modificar um modelo xsl, "CallItemTemplate" que na verdade invoca o nosso modelo de grade em ItemStyle. Vamos passar dois parâmetros para o modelo de grade para que ele terá os dados necessários para gerar condicionalmente abrindo e fechando <tabela> marcas.
- Modificar outro pouco de ContentQueryMain.xsl que chama o CallItemTemplate"" passá-lo um LastRow"" parâmetro de modo que LastRow pode ser transferido para o nosso modelo de grade.
Localize o modelo chamado "OuterTemplate.CallItemTemplate" identificado pela Cadeia de caracteres:
<XSL:modelo nome="OuterTemplate.CallItemTemplate">
Substituir o modelo inteiro como segue:
|
|
<XSL:modelo nome="OuterTemplate.CallItemTemplate">
<XSL:param nome="CurPosition" />
<!--
Adicionar o LastRow"" parâmetro.
Nós só usá-lo quando a passagem de estilo de item no é "Grade".
-->
<XSL:param nome="LastRow" />
<XSL:Escolha>
<XSL:Quando teste="@ Estilo = 'NewsRollUpItem'">
<XSL:aplicar-se-modelos Selecione="." modo="ItemStyle">
<XSL:com-param nome="EditMode" Selecione="$cbq_iseditmode" />
</XSL:aplicar-se-modelos>
</XSL:Quando>
<XSL:Quando teste="@ Estilo = 'NewsBigItem'">
<XSL:aplicar-se-modelos Selecione="." modo="ItemStyle">
<XSL:com-param nome="CurPos" Selecione="$CurPosition" />
</XSL:aplicar-se-modelos>
</XSL:Quando>
<XSL:Quando teste="@ Estilo = 'NewsCategoryItem'">
<XSL:aplicar-se-modelos Selecione="." modo="ItemStyle">
<XSL:com-param nome="CurPos" Selecione="$CurPosition" />
</XSL:aplicar-se-modelos>
</XSL:Quando>
<!--
Transmitir posição atual e lastrow para o modelo de itemstyle.xsl de grade.
ItemStyle.xsl que usará para emitir o abrir e fechar <tabela> marcas.
-->
<XSL:Quando teste="@ Estilo = 'Grid'">
<XSL:aplicar-se-modelos Selecione="." modo="ItemStyle">
<XSL:com-param nome="CurPos" Selecione="$CurPosition" />
<XSL:com-param nome="Última" Selecione="$LastRow" />
</XSL:aplicar-se-modelos>
</XSL:Quando>
<XSL:caso contrário>
<XSL:aplicar-se-modelos Selecione="." modo="ItemStyle">
</XSL:aplicar-se-modelos>
</XSL:caso contrário>
</XSL:Escolha>
</XSL:modelo>
|
Os comentários descrevem a finalidade das alterações.
É claro, o OuterTemplate.CallItemTemplate"" Chama-se de outro modelo. Localize esse modelo procurando por essa seqüência de caracteres de texto:
<XSL:modelo nome="OuterTemplate.Body">
Percorra as instruções em OuterTemplate.Body e inserir o parâmetro LastRow como segue (mostrado como um comentário em itálico):
<XSL:modelo de convite nome="OuterTemplate.CallItemTemplate">
<XSL:com-param nome="CurPosition" Selecione="$CurPosition" />
<!-- Inserir o parâmetro LastRow. -->
<XSL:com-param nome="LastRow" Selecione="$LastRow"/>
</XSL:modelo de convite>
Depois de tudo isso, Finalmente temos coisas configurar corretamente para que o nosso ItemStyle.xsl pode emitir <tabela> marcas no lugar certo.
ItemStyle.Xsl
OBSERVAÇÃO: Mais uma vez, o check-in ItemStyle.xsl depois de fazer todas as alterações para que você veja o efeito dessas alterações.
Aqui temos duas tarefas:
- Substituir o modelo inteiro de grade. Você pode copiar/colar de baixo.
- Adicionar alguns patranhas fora da definição de modelo que permite "formatcurrency" modelo de trabalho. (Você pode dizer que eu tenho um identificador tênue em XSL).
Primeira, perto do topo da ItemStyle.xsl, Adicione esta linha:
<!-- Alguns patranhas que nos capacita a Exibir dos e.u.. moeda. -->
<XSL:decimal-formato nome="pessoal" dígito="D" />
<XSL:modelo nome="Padrão" correspondência="*" modo="ItemStyle">
Nota que eu adicionado diretamente antes do <XSL:nome do modelo = padrão"" …> definição.
Próximo, voltar para o nosso modelo de grade. Substituir o modelo de grade inteiro com o código abaixo. Isso é completamente comentou, mas não hesite em me e-mail ou deixar comentários no meu blog, se você tiver perguntas.
|
|
<XSL:modelo nome="Grelha" correspondência="Linha[@ Estilo = 'Grid']" modo="ItemStyle">
<!--
ContentMain.xsl passa CurPos e última.
Podemos usá-los para emitir condicionalmente a abrir e fechar <tabela> marcas.
-->
<XSL:param nome="CurPos" />
<XSL:param nome="Última" />
<!-- As seguintes variáveis são inalteradas desde o padrão ItemStyle -->
<XSL:variável nome="SafeImageUrl">
<XSL:modelo de convite nome="OuterTemplate.GetSafeStaticUrl">
<XSL:com-param nome="UrlColumnName" Selecione="'ImageUrl'"/>
</XSL:modelo de convite>
</XSL:variável>
<XSL:variável nome="SafeLinkUrl">
<XSL:modelo de convite nome="OuterTemplate.GetSafeLink">
<XSL:com-param nome="UrlColumnName" Selecione="'LinkUrl'"/>
</XSL:modelo de convite>
</XSL:variável>
<XSL:variável nome="DisplayTitle">
<XSL:modelo de convite nome="OuterTemplate.GetTitle">
<XSL:com-param nome="Título" Selecione="@Title"/>
<XSL:com-param nome="UrlColumnName" Selecione="'LinkUrl'"/>
</XSL:modelo de convite>
</XSL:variável>
<XSL:variável nome="LinkTarget">
<XSL:se teste="@OpenInNewWindow = 'True'" >Blank</XSL:se>
</XSL:variável>
<!--
Aqui, definimos uma variável, "tableStart". Este contém o HTML que usamos para definir a abertura da mesa, bem como os rótulos de coluna. Observe que, se CurPos = 1, inclui o HTML em uma marca CDATA.
Caso contrário, vai ser vazio.
O valor de tableStart é emited sempre ItemStyle é chamado através de ContentQueryMain.
-->
<XSL:variável nome="tableStart">
<XSL:se teste="$CurPos = 1">
<![CDATA[
<borda de tabela = 1>
<TR bgcolor = "azul">
<TD><cor da fonte = "branco"><b>Nome do projeto</b></fonte></TD>
<TD align = "right"><cor da fonte = "branco"><b>Data completa</b></fonte></TD>
<TD align = "right"><cor da fonte = "branco"><b>Orçamento</b></fonte></TD>
<TD align = "right"><cor da fonte = "branco"><b>Despesas reais</b></fonte></TD>
<TD><cor da fonte = "branco"><b>Status geral</b></fonte></TD>
</TR>
]]>
</XSL:se>
</XSL:variável>
<!--
Outra variável, tableEnd simplesmente define o fechamento marca de tabela.
Tal como acontece com tableStart, sempre é emited. Eis porque seu valor é atribuído condicionalmente com base em se nós já foi passados a última linha por ContentQueryMain.
-->
<XSL:variável nome="tableEnd">
<XSL:se teste="$CurPos = $Last">
<![CDATA[ </tabela> ]]>
</XSL:se>
</XSL:variável>
<!--
Sempre emitir o conteúdo de tableStart. Se isto não é a primeira linha que passou para nós por ContentQueryMain, Então sabemos que seu valor será em branco.
Desativar a saída saída porque quando tableStart não em branco, Ele inclui HTML real que nós queremos ser processado pelo navegador. Se não contarmos o analisador XSL para desabilitar saída escapando, Ele irá gerar coisas como"<tabela>" em vez de"<tabela>".
-->
<XSL:valor da Selecione="$tableStart" desativar-saída-saída="Sim"/>
<TR>
<!--
P:Project_x005F_x0020_Name P:Project_x005F_x0020_End_x005F_x0020_Date P:Project_x005F_x0020_Budget P:Project_x005F_x0020_Expenses P:Project_x005F_x0020_Status
-->
<TD>
<XSL:valor da Selecione="@ Project_x005F_x0020_Name"/>
</TD>
<TD alinhar="direito">
<XSL:valor da Selecione="@ Project_x005F_x0020_End_x005F_x0020_Date"/>
</TD>
<TD alinhar="direito">
<XSL:modelo de convite nome="FormatCurrency">
<XSL:com-param nome="valor"
Selecione="@ Project_x005F_x0020_Budget"></XSL:com-param>
</XSL:modelo de convite>
</TD>
<TD alinhar="direito">
<XSL:modelo de convite nome="FormatCurrency">
<XSL:com-param nome="valor" Selecione="@ Project_x005F_x0020_Expenses">
</XSL:com-param>
</XSL:modelo de convite>
</TD>
<TD>
<XSL:valor da Selecione="@ Project_x005F_x0020_Status"/>
</TD>
<!--
Todos os itens a seguir está comentada para esclarecer as coisas.
No entanto, trazer de volta e o material em um <TD> para ver seu efeito.
-->
<!--
<div id = "linkitem" Classe = "item">
<XSL:se teste = "Cadeia de caracteres de comprimento($SafeImageUrl) != 0 ">
<div class = "image-área-esquerda">
<um href = "SafeLinkUrl{$SafeLinkUrl}" destino = "{$LinkTarget}">
<Classe img = "imagem-fixo-largura" src = "{$SafeImageUrl}"
Alt = "{@ ImageUrlAltText}"/>
</uma>
</div>
</XSL:se>
<div class = "item de link">
<XSL:modelo de convite
Name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<um href = "SafeLinkUrl{$SafeLinkUrl}"
destino = "{$LinkTarget}" title = "{@ LinkToolTip}">
<XSL:valor da selecione = "$ DisplayTitle" />
</uma>
<div class = "description">
<XSL:valor de select="@Description" />
</div>
</div>
</div>
-->
</TR>
<!--
Emitir o fechamento marca de tabela. Se não estamos na última linha,
Este será em branco.
-->
<XSL:valor da Selecione="$tableEnd" desativar-saída-saída="Sim"/>
</XSL:modelo>
<XSL:modelo nome="FormatCurrency">
<XSL:param nome="valor" Selecione="0" />
<XSL:valor da Selecione='formato-número($valor, "$ DDD,DDD,DDD.DD", "pessoal")' />
</XSL:modelo>
|
