salesforce零基础学习(八十四)配置篇: 自定义你的home page layout

当我们进入salesforce系统或者切换app后,默认第一个看到的就是home页面。home页面简单的来说可以包括左侧(narrow component)和右侧(wide component)两部分。

左侧包含Recent View,Custom Link,Create New等快捷入口等组件,右侧包括tasks,item to approval,calendar,dashboard snapshot等等。

有时,不同简档的用户需要看到不同的Home页面中的组件或者显示不同的custom link等操作,这时我们就需要针对不同的简档配置不同的home page layout。配置步骤如下:

一. Home Page Layout配置

1.Set Up处搜索home page找到Home Page Layouts进入;

2.输入custom home page layout 名称,勾选需要显示在左侧和中间部分需要显示的组件;

3.调整顺序并点击save & assign;

4.将创建的page layout 分配给profile 为System Administrator保存;

5.效果展示:

通过第一个图和效果展示的图可以看到通过自定义配置,将左侧的Create New组件拿掉了。

通过上面的配置,我们看到针对profile自定义home page layout 很简单,无非就是勾选需要的component,调整顺序后分配一个或者多个简档即可。

那么component是怎么出现的呢?

component包含两部分,一部分是标准的component,包括Create New,Item to approve等等,另外一部分就是自定义 home page component.使用自定义home page component可以让你的home首页变得更加丰富,更加符合扩充的业务要求。

 二.Home Page Component

1.点击Set Up,搜索Home Page Component后点击Home Page Component:从图中可以看到,上面标准的component包括常见的component,其中Messages & Alerts 和Custom Links可以自定义,其他均只能引用,无法修改,下面有新建自定义的Components的按钮可以新建;

2.点击New按钮新建Custom Components,可以分成四类创建

  •   Links:选择一个或者一组custom link作为一个component展示,类似标准组件custom links效果,此种类型仅可以放在左侧(Narrow Component);
  •   Image/Logo:一张图片展示在sidebar处,此处更多的是使用公司的logo;
  •   HTML Area:富文本编辑器展示HTML区域,此类型可以放在左侧(Narrow Component),也可以放在右侧(Wide Component);
  •        Visualforce Area:展示一个VF Page,此类型可以放在左侧(Narrow Component),也可以放在右侧(Wide Component)。

 Links类型为可以创建一个自定义链接展示在component中,后面会详细描述Links类型的展示,下面针对Image/Logo,HTML Area 以及Visualforce Area 类型简单描述。

2.1 Image/Logo:此类型通常用于展示公司Logo,其他情况下根据业务情况自己抉择。显示的图片需要先上传Document上并且要求图片必须小于100K。

  •   选择Type类型为Image,Name赋值以后点击Next;
  •   点击Insert an Image选择图片存在的Document,选择后点击Save。
  •   点击需要添加的Home Page Layout,将需要的componnet选中,并调整Component显示顺序后Save;
  •   Home首页效果展示。 

   2.2 Html Area : 此处可以使用富文本编辑器简单的展示你需要展示的HTML区块,此模块不支持HTML标签,区域可以根据你创建时的选择放在左侧以及右侧。

  •   选择Type为HTML Area 输入名称后选择Next;
  •   使用富文本编辑器按照要求创建需要的富文本内容以及格式后点击Save;
  •   更改Home Page Layout,选择Test Html Area后更改显示顺序点击Save.下图为显示效果。

2.3 Visualforce Area : HTML Area展示的效果毕竟没法写样式有很多限制,展示Visualforce Page可以更加丰富页面效果,比如首页展示公司产品进行轮播等等。

  •   新建Type 为Visualforce Area的Component,并赋值Name;
  •    选择需要展示的Visualforce Page 设置显示的高度等设置信息点击Save,然后修改Home Page Layout,将此Component勾选;
  •    展示效果:

 三. Custom Link

第二步中有一项是创建类型为Custom Links,选择此类型后将一个或者一组Custom Link放在一起作为一个Component展示,Custom Link入口以及实现展示如下:

1.Set Up搜索Custom Link后在home下有一项为Custom Links,选中后即可新建或者更改Custom Link;

2.Custom Link源包括三部分组成:URL,On Click JavaScript以及Visualforce Page。重写过标准的action或者新建过action的小伙伴应该对下面的页面很熟悉,Custom Link同样也支持Merge Field;

  •   URL:此种方式直接在输入框写一下目标的URL即可,当然这里面是可以引用merge field以及function来简单的实现一些动态情况的处理;
  •   On Click JavaScript:如果此链接是有复杂的逻辑进行确认最终的URL,可以使用On Click JavaScript,此种方式除了可以引用merge field以外,引入ajax toolkit js后还可以使用soql语句进行fetch操作来更加强大的支持你的业务要求。下面的例子为当前登录用户为lightning用户,则显示标准lightning页面,否则显示自定义列表页面;
  • Visualforce Page:指定点击此链接跳转到某个Visualforce Page页面

3.修改Home Page Component,将需要显示的Custom Links 选中后,将此component显示在Home Page Layout上即可.

总结:此篇主要描述如何自定义Home主页的UI,以及Home Page Layout,Home Page Component,Custom Links使用,主要内容都是基于配置的,开发量基本没有。篇中有描述错误地方欢迎指出,有问题的欢迎留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玄魂工作室

textarea的中文输入判断与搜狗输入法的特殊行为

虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境。 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实...

42411
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:发现 Wijmo

什么是 Wijmo? Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo 部件对客户端Web开发进行了优化,并且充分利用了jQuery的强大...

2239
来自专栏GuZhenYin

[EasyUI美化换肤]更换EasyUi图标

前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是...

6248
来自专栏前端新视界

构建通用的 React 和 Node 应用

原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者...

3187
来自专栏前端说吧

字体图标库使用方法

1.3K7
来自专栏前端下午茶

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

6722
来自专栏数据小魔方

动态图表系列4|列表框(index函数)

今天跟大家分享动态图表系列3——列表框(index函数)! 数据与之前的数据一致,核心技巧只有两点: 使用列表框制作动态数据源; 使用 动态数据源插入动态图表。...

3477
来自专栏阮一峰的网络日志

网页开发的6种在线调试环境

如今的网页代码,一般由三个部分组成:   * HTML,语义层,提供网页的内容。   * CSS,表现层,规定网页的外观。   * Javascript,...

3253
来自专栏大数据钻研

Meta标签的那些事

Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。它可用于浏览器(如何显示...

2805
来自专栏HTML5学堂

原来“神笔马良”的那根“笔”也可以写代码

HTML5学堂:在大家都羡慕“神笔马良”拥有那支无所不能的笔时,在前端开发中,也出现了一支很神奇的“笔”——CodePen,顾名思义,code+pen,即是代码...

3815

扫码关注云+社区

领取腾讯云代金券