欢迎访问 CPEM全国电力设备管理网!
官方微信|设为首页|加入收藏
cpem标语
   
2024无人机
金巡奖
  • 金智信息
  • 国电南自
  • 深圳普宙
  • 联想
  • 国网信通
  • 艾睿光电
当前位置:首页 > 电力资讯 > 企业动态

PowerAppsPortals:搭建供应商门户(三)修改网站样式

2022-10-21分类:电力资讯 / 企业动态来源:百度资讯
【CPEM全国电力设备管理网】

等到我们成功创建网站,并导入解决方案后就可以开始制作供应商门户。

此时切换到应用列表,即可看到有一个门户类型的应用显示在列表中。

同时会有一个提示 - 试用版门户应用将在 30 天后过期,若要保留它,请将其转化为生产。

这是因为我们在 Power Apps 中创建的 Portals 首先会以试用的方式被创建出来,这个试用的 Portals 会在 30 天后到期,到期以后会被保留 7 天。这 7 天是暂停使用的状态,必须转换成生产才可以继续使用,否则会被删除掉。

所以就不要想免费用 Portals 了,这个必须要在生产环境中,也就是必须有正式 Power Apps 订阅才可以转化生生产门户。


编辑 Portals 网站



当 Portals 成功创建后,我们进入 Portals 的编辑界面。

可以看到默认微软会帮助我们搭建一个示例的 Portals ,里面包含了主页,联系我们等示例页面。

整个编辑器由 5 个部分组成。




最上方是一个命令栏,其中包括【新建页面】,【删除组件】,【同步配置】和【浏览网站】几个操作。

【新建页面】指的是新建一个网站页面。

【删除组件】是将选中的组件从网站中删除。

【同步配置】会将 Dataverse 中最新的门户配置和当前的 Studio 编辑器进行同步。因为我们之前提到过 Power Apps Portals 都是基于 Dataverse 构建的,因此很多配置都是在 Dataverse 托管的,为了管理Portals 实际上微软会在我们创建 Portals 后在环境中自动创建要给叫做【门户管理】的模型驱动应用,这个我们会在后面的章节进行说明。

这里大家只需要记住,【同步配置】会将我们在 Dataverse 中关于门户的配置立即同步到编辑器中。

【浏览网站】会清除掉缓存,然后直接打开当前的 Portals 页面,让我们看到保存后最新的网站样式。

左侧显示是【工具栏】,这里用来管理当前 Portals 的所有网页,包括添加组件,编辑主题样式等功能都在这里。

中间部分就是 Portals 的画布,我们添加的组件都会放在这里,最终网页的样子也是根据我们在中间画布区域的配置来进行的呈现。

底部是【源代码编辑器】,之前提到过 Portals 除了可以拖拽组件外,也可以直接写前端代码,这个代码就是在底部进行的编写。



右侧是【属性面板】,这里和画布应用类似,是用来配置所选的网页或者具体组件属性的地方。

比如针对【文本】组件,我们可以配置他的对齐方式,字体颜色。而具体的字体大小,文字内容可以直接在画布中做更改。



点击浏览网站,就可以用浏览器打开并访问我们创建的网站。




从空白创建的网站中,除了几个页面外,也是直接配置好了 Azure AD 和本地账户密码的身份认证方式。

这块我们后面在说。

更改网页样式


在修改样式之前,我们先观察一下初始模板中 Portals 的网页是由哪几个部分构成的。

我们鼠标移动到对应的组件上,左上角就会显示相应的组件名。

可以发现一个页面是由多个【节】构成的,而这个【节】我们可以认为他是行。

而在一行中会根据情况插入多个列,默认情况下在行中插入一列,这一列的宽度就是整个行的100% 。

插入 2 列,每列就是 50% , 3列 每列就是 33% 。

而在每一列中,我们可以插入图片,文本这些组件来完成网站的构建。

所以整个 Portals 的网站布局,我们可以把它想象成一张网格,我们可以控制一个单元格所占的大小,并在单元格中添加元素。

那大家基本了解网站页面的构成后,我们来稍微改造一下我们的 Portals 。

一般做网页的时候,要不然是先画个草稿图,要不然是做个设计图。

然后按照图片来把网页搭建出来。

我们这里偷个懒,顺便给 Portals 做做广告,就按照 Power Apps Portals 的官网稍微搭建一下我们自己的网站。

https:// powerapps.microsoft.com /zh-cn/portals/

我们就来看导航下面的区域。

还记得我们刚才说的,在做网页的时候要把网页布局想象成一个网格。

那针对 Power Apps Portals 的这个网页,我们可以把紫色的部分想象成一行,然后中间的部分是一列。

在这一列里面有 2 段文字, 2 个按钮和一个图片。



那这时候可能有人会问,为什么不是 4行,而是 1 行 1列。

有 2 个原因,一个是因为他们整体有一个背景色,这种情况下如果是 1 行,那你只需要给 1 行设置背景色。

而如果是 4 行的话,就需要分别给每行设置背景色,当然这还是理想情况下。

更重要的一点是在 Power Apps Portals 中,目前无法在列中插入节。

那我们回到 Power Apps Portals Studio 的编辑界面去看一下,怎么去实现。

首先我们把默认网站导航下边所有的节都删掉,可以选中节,然后点键盘 delete 键进行删除。



然后我们点左侧的 + ,插入【一列式节】。一列式节的意思就是我们插入的一行里面只有1 列。



有了一行后,就按照我们刚才设想的,给这一行设置个背景颜色。

你可以大概选个颜色,或者可以在微信截图的时候,也会显示鼠标所在位置的 rgb 颜色。



然后把节的对齐方式设置为居中,因为我们可以看到列中所有内容都是居中显示的。

现在这一行已经变成了紫色的,那接下来我们就在列中插入一个文本组件。

其中的文本内容,可以直接从 Power Apps Portals 官网中进行复制。

粘贴的时候,记得是纯文本粘贴,如果直接 ctrl + v 会把整个样式都粘贴进来。

之后再调整下字体颜色,对齐方式和字体大小,让他看起来和官网一样。



然后再插入一个文本,用同样的方式把第二行文字粘贴过来

接下来我们先不去管按钮的,原因我们等会儿再说。

我们先去插入一个图片,插入图片后,我们可以从当前网站中选择一个图片,或者从本地上传一个图片。

另外还有一种方法是直接使用外部 URL ,这种方式可以通过图片地址来加载一个网络图片。



这时候我们可以直接把 Portals 官网的图片复制过来,选中图片后右键点击复制图片地址。

然后把地址粘贴到图片控件的外部 URL 属性中,这时候图片就直接加载出来了。



然后,我们用 PC 和手机浏览网站,可以看一下效果。

Portals 的特点是可以让我们构建的网站直接是响应式的,可以同时在PC 和移动端都有较好的显示效果。

对了,左上角还可以换个 Logo 。这里我就直接用微软 Logo 了。

记得要调整好宽高,别变形了。



这些就是我们目前不写代码能够实现的网站样式修改了。

这也是为什么,我们跳过了 Portals 官网的按钮。

因为目前没有办法直接通过组件的方式添加按钮。

要想添加按钮的话,只能通过源代码来进行编辑,这块我们后面有时间的话再说。


分享到:
相关文章
合作伙伴
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 10
  • 11
  • 12
  • 13

logo.png

CPEM全国电力设备管理网  © 2016 版权所有    ICP备案号:沪ICP备16049902号-7