Function

$().SPServices.SPDisplayRelatedInfo

Certification

Functionality

SPDisplayRelatedInfo is a function in the jQuery Library for SharePoint Web Services that lets you display information which is related to the selection in a dropdown. This can really bring your forms to life for users: rather than just selecting bland text values, you can show them images and links that are related to their choices.

How Does It Work?

The SPDisplayRelatedInfo function works like this:

  • When the function is first called, it attaches an event handler to the dropdown control. The logic here varies a bit depending on what type of dropdown it is.
  • When the selected option in the dropdown changes, SPDisplayRelatedInfo calls two Lists Web Service operations:
  • GetList on the relatedList to get information about its columns (fields)
  • GetListItems to get the items where the specified column's value matches the current selection. Note that there can be multiple items returned; generally displayFormat: "table" makes more sense if you'll want to display multiple items.
  • For each column it's asked to display, SPDisplayRelatedInfo calls a private function (showColumn) to render the column value based on its type. Most of the normal column types are covered, though locale conversions can't be done from the client side (yet!). The related information is shown in a DIV which is inserted into the form. The DIV is named"SPDisplayRelatedInfo_" + columnStaticName in case you need to do any post-processing.

    NOTE: This function is only meant to be used on the NewForm or EditForm; it works when a dropdown's value is changed. If you'd like to do something similar on a DispForm, I'd recommend using a Data View Web Part (DVWP) with an AggregateDataSource.

    Tip: If you don't want to see the column headers, pass in ms-hidden for headerCSSClass. (This is a CSS class in core.css which sets display: none.)

    Prerequisites

  • You'll need to have a list (relatedList) which contains the values in the dropdown in one column and the related values you'd like to display in additional columns. If you're already using SPCascadeDropdowns, then you'll already have a list (or lists) in place which you can use here.

    Here is an example of the form where you want to use SPDisplayRelatedInfo:

    In this example, I have a list called Systems, which has three columns:

    Syntax

    $().SPServices.SPDisplayRelatedInfo({
    columnName: "",
    relatedWebURL: "",
    relatedList: "",
    relatedListColumn: "",
    relatedColumns: [],
    displayFormat: "table",
    headerCSSClass: "ms-vh2",
    rowCSSClass: "ms-vb",
    numChars: 0,
    matchType: "Eq",
    CAMLQuery: "",
    matchOnId: false, // Added in v0.7.1
    completefunc: null,
    debug: true
    });

    columnName
    The DisplayName of the column in the form

    relatedWebURL
    The URL of the Web (site) which contains the relatedList. If not specified, the current site is used. Examples would be: "/", "/Accounting", "/Departments/HR", etc. Note: It's always best to use relative URLs.

    relatedList
    The name or GUID of the list which contains the related information. If you choose to use the GUID, it should look like: "{E73FEA09-CF8F-4B30-88C7-6FA996EE1706}". Note also that if you use the GUID, you do not need to specify therelatedWebURL if the list is in another site.

    relatedListColumn
    The StaticName of the column in the related list

    relatedColumns
    An array of StaticNames of related columns to display

    displayFormat
    The format to use in displaying the related information. The default is "table". The displayFormat takes one of two options:

  • "table" displays the matching items much like a standard List View Web Part would, in a table with column headers
  • "list" also uses a table, but displays the item(s) in a vertical orientation

    headerCSSClass
    If specified, the CSS class for the table headers. The default is "ms-vh2".

    rowCSSClass
    If specified, the CSS class for the table cells. The default is "ms-vb".

    numChars
    If used on an input column (not a dropdown), no matching will occur until at least this number of characters has been entered. The default is 0.

    matchType
    If used on an input column (not a dropdown), type of match. Can be any valid CAML comparison operator, most often "Eq" or "BeginsWith". The default is "Eq".

    CAMLQuery

    The CAMLQuery option allows you to specify an additional filter on the relationshipList. The additional filter will be <And>ed with the existing CAML which is checking for matching items based on the parentColumn selection. Bacause it is combined with the CAML required to make the function work, CAMLQuery here should contain a CAMLfragment such as:

    CAMLQuery: "<Eq><FieldRef Name='Status'/><Value Type='Text'>Active</Value></Eq>"

    matchOnId
    By default, we match on the lookup's text value. If matchOnId is true, we'll match on the lookup id instead. The default value is false.

    completefunc
    If specified, the completefunc will be called each time there is a change to columnName. Potential uses for the completefunc: consistent default formatting overrides, additional lookup customizations, image manipulations, etc. You can pass your completefunc in either of these two ways:

    completefunc: function() {

    ...do something...

    },

    or

    completefunc: doSomething, // Where doSomething is the name of your function

    debug
    Setting debug: true indicates that you would like to receive messages if anything obvious is wrong with the function call, like using a column name which doesn't exist. I call thisdebug mode.

    Examples

    $().SPServices.SPDisplayRelatedInfo({

        columnName: "System",

        relatedList: "Systems",

        relatedListColumn: "Title",

        relatedColumns: ["System_x0020_Image", "Lead_x0020_Sales_x0020_Rep"],

        displayFormat: "list"

    });

    So I'm asking SPDisplayRelatedInfo to show me the values in the System_x0020_Image and Lead_x0020_Sales_x0020_Rep columns (these are theStaticNames of the list columns as opposed to the DisplayNames) in the Systems list under the System column in my form using thelist display format where the System value matches theTitle value in the Systems list. I'm just taking the default CSS classes for the example. As you can see, you can pass in any CSS class you'd like to make the SPDisplayRelatedInfo output match your site branding.

    In this example, I'm displaying some information about the Region. To make the output look better, I'm doing a little post-processing on theTotal_x0020_Sales column. You'll see that I'm both prepending the value with "$" and right justifying it. In my case, the column isRegion and the Total_x0020_Sales column is the 4th one, so I'm using:nth-child(4).

    $().SPServices.SPDisplayRelatedInfo({

    columnName: "Region",

    relatedWebURL: "/Intranet/JQueryLib",

    relatedList: "Regions",

    relatedListColumn: "Title",

    relatedColumns: ["ID", "Country", "Title", "Total_x0020_Sales"],

    displayFormat: "table",

    completefunc: addDollarSigns,

    debug: true

    });

    function addDollarSigns() {

    $("#SPDisplayRelatedInfo_Region td:nth-child(4)").prepend("$").css("textAlign", "right");

    }

SPServices.SPDisplayRelatedInfo的更多相关文章

  1. Sharepoint 高级筛选

    先看看效果吧.............. 默认情况下:不做任何筛选. 添加一个筛选条件: 条件:如果是int类型那么可以有> < = 等 如果是string的话那么就没有这么多条件,当然这 ...

  2. SharePoint中报表选择

    Office 365中制作报表的方式很多. 这里介绍下使用js获取SharePoint List实现报表的一种方法 资源 Jquery 1.8.2 http://blog.jquery.com/201 ...

  3. 使用SharePoint Designer定制开发员工工作日志系统实例!

    昨天已介绍了一篇<使用SharePoint Designer定制开发专家库系统实例!>,今天继续来介绍使用SharePoint Designer定制开发员工工作日志系统实例,主要功能包括填 ...

  4. 使用SharePoint Designer定制开发专家库系统实例!

    将近大半年都没有更新博客了,趁这段时间不忙,后续会继续分享一些技术和实际应用.对于Sharepoint的定制开发有很多种方式,对于一般的应用系统,可以使用Sharepoint本身自带的功能,如列表作为 ...

  5. SharePoint List来做项目管理

    其实这是一个常见的问题,已经不仅仅只是一次用SharePoint List来做项目管理了. 核心 1. SharePoint List Lookup自己来实现项目的父子关系 2. 权限控制,直接控制在 ...

  6. 牛刀小试、用SharePoint 实现请假管理功能

    转:http://www.cr173.com/html/15518_1.html "请假管理"应用,应该算是 SharePoint 的"Hello World!" ...

  7. 利用InfoPath实现SharePoint Server 2013列表的级联选择(Cascading Drop Down List)

    最近在利用SharePoint Server 2013的列表组织和存储数据,发现SharePoint列表原始不支持级联选择的功能. 谷歌百度一通以后,发现了很多通过代码实现的方案,利用第三方的插件sp ...

  8. 【SharePoint】SharePoint2013中使用客户端对象模型给用户控件赋初值

    本文要实现的功能:新建一条列表记录,打开新建记录画面时,自动给[申请人]赋值为当前登录用户. 在SharePoint2010中,可以使用SPServices的SPFindPeoplePicker方法来 ...

  9. 在sharepoint 2010创建级联下拉菜单

    SPServices是一个jQuery库,它提取SharePoint Web服务,并使其更容易使用.它可以使用不同的Web服务操作提供更有用且很酷的功能.它完全安装在客户端,不需要服务器. 用SPSe ...

随机推荐

  1. ubuntu 安装bochs

    //首先官网下载bochs源码wget http://bochs.sourceforge.net/svn-snapshot/bochs-20150503.tar.gz//然后解压 tar vxzf b ...

  2. [转]C# dataGridview 报“索引-1没有值”的解决办法

    很多WINFORM的开发人员在DataGridView的开发当中,都会出现“索引-1没有值”这个烦人的问题,其实较早之前,我已经大概知道问题的所在,也找到了解决方法,不过一直没有时间去深入研究一下,今 ...

  3. cocos2d-x开发: 场景实体(entity)管理

    公司现在开新项目,主题的框架部分都是我自己在做,不用受到别人的牵制,所以还算是比较的自由,很好发挥. 游戏并不大,所以需要用到的地方并不多.今天花了一些时间写了场景entity管理的部分代码,还没有完 ...

  4. C++ Web Service SDK

    https://github.com/zaphoyd/websocketpp https://github.com/aws/aws-sdk-cpp

  5. Outlook Web App简介

    一.什么是Outlook Web AppOutlook Web Access简称OWA是基于微软Hosted Exchange技术的托管邮局的一项Web访问功能.通过访问Outlook Web Acc ...

  6. Jellycons – iOS 8 图标下载(PNG, SKETCH)

    Jellycons 这套由 LoveUI.co 设计图标包括30款扁平化,圆滑,丰富多彩的 iOS 8 应用程序图标,可以用于于个人和商业项目的使用.另外,PNG 格式包含11种尺寸(1024px, ...

  7. JAVA jdbc(数据库连接池)学习笔记(二) SQL注入

    PS:今天偶然间发现了SQL的注入...所以就简单的脑补了一下,都是一些简单的例子...这篇写的不怎么样...由于自己没有进行很深的研究... 学习内容: 1.SQL注入的概念...   所谓SQL注 ...

  8. 用cryptico.js实现RSA加密(应对cryptico不支持PEM)

    问题: 随手分享一下好了,这个问题困扰了很久. cryptico.js这个加密算法库很全,很适合在前端用到各种加密解密算法的需求.但是美中不足的是,它的RSA加密不支持PEM格式,所以如果你后端用ja ...

  9. ASP.NET运行时详解 集成模式和经典模式

    遗留问题 在<ASP.NET运行时详解 生命周期入口分析>中遗留两个问题,包括Application的InitInternal方法执行细节.IIS6和II7经典模式请求管道管理类Appli ...

  10. WPF Control Hints - TabControl : 怎么修改整个tab header的margin?

    WFP里面TabControl我们可以添加多个TabItem,每个TabItem的Header就是我们常点击的tab标签.但是默认的layout行为里面,这个header是有个2个像素的margin, ...