Sergey Belskiy Technical Blog

All about SharePoint

Возможность отображения диалоговых окон в CQWP

Привет всем. У меня есть веб часть новостей, которую я сделал с помощью CQWP. Но при переходе на определённую новость, открываеться просто обычная страница с новостью. Я хочу сделать так чтобы открывалась новость в диалоговом окне.

До

image

После

image

Как это сделать. Да очень просто. Чуток видоизменить шаблон стиля, который мы использум.

<div class=”link-item”> 
          <xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/> 
                      <a href=”#” title=”{@LinkToolTip}”>   
                    <xsl:attribute name=”onclick”>   
                        javascript:

                        function DialogCallback(dialogResult, returnValue)  
                        {   
                            SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);   
                        }

                        function onQuerySucceded()  
                        {   
                        var currentSiteUrl = this.site.get_url() + ‘/Lists/Announcements/DisplayForm.aspx?

                        ID=<xsl:value-of select=”@ID”/>’;

                        var options =  
                        {   
                        url: currentSiteUrl,   
                        title: ‘Новость’,   
                        allowMaximize: true,   
                        showClose: true,   
                        width: 1000,   
                        height: 600,   
                        dialogReturnValueCallback: DialogCallback   
                        };

                        SP.UI.ModalDialog.showModalDialog(options);  
                        }

                        function onQueryFailed()  
                        {   
                        alert(‘Неправильная ссылка’);   
                        }

                        var ctx = SP.ClientContext.get_current();  
                        this.site = ctx.get_site();

                        ctx.load(this.site);

                        ctx.executeQueryAsync  
                        (   
                        Function.createDelegate(this, onQuerySucceded),   
                        Function.createDelegate(this, onQueryFailed)   
                        );

                    </xsl:attribute>  
                <xsl:value-of select=”$DisplayTitle”/>   
            </a>

Вот и всё!