├── .gitignore
├── LICENSE
├── README.md
├── dist
├── webpage-extension.js
└── webpage-extension.min.js
├── gulpfile.js
├── package.json
├── src
├── icon.ts
├── meta.ts
├── webpage-viewer.ts
└── webpage.ts
└── typings
├── globals
├── dashboards
│ └── dx-dashboard-designer.d.ts
├── devextreme
│ ├── index.d.ts
│ └── typings.json
├── jquery
│ ├── index.d.ts
│ └── typings.json
└── knockout
│ ├── index.d.ts
│ └── typings.json
└── index.d.ts
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Developer Express Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ⛔ DEPRECATED. This project was moved to a new repository. Visit [dashboard-extensions](https://github.com/DevExpress/dashboard-extensions) to find an updated version.
2 |
3 | The current repository does not support the [modular approach](https://docs.devexpress.com/Dashboard/119108/) for HTML JS Dashboard and will not be updated in the future.
4 |
5 | ------
6 |
7 | A custom **Web Page** item displays a single web page or a set of pages. You can use the Web Page as a detail item along with the [Master-Filtering](https://documentation.devexpress.com/#Dashboard/CustomDocument117060) feature.
8 |
9 | ## Installation
10 |
11 | 1. Download the latest version of scripts [here](https://github.com/DevExpress/dashboard-extension-webpage-item/releases).
12 |
13 | 2. Add the *dist* folder in your project.
14 |
15 | 3. Attach the download script to the project inside the `` section before the end tag onto the page containing Web Dashboard.
16 | ```xml
17 |
18 |
19 |
20 |
21 | ```
22 |
23 | 4. Handle the Web Dashboard's [BeforeRender](https://documentation.devexpress.com/#Dashboard/DevExpressDashboardWebScriptsASPxClientDashboard_BeforeRendertopic) event to perform client-side customization of the Web Dashboard control before the control and its elements have been rendered.
24 | ```xml
25 |
26 |
27 |
28 |
29 | ```
30 | ```C#
31 | @* For ASP.NET MVC *@
32 | @Html.DevExpress().Dashboard(settings => {
33 | settings.Name = "Dashboard";
34 | settings.ClientSideEvents.BeforeRender = "onBeforeRender";
35 | }).GetHtml()
36 | ```
37 |
38 |
39 | 5. Register the custom item extension to add the Web Page to the Web Dashboard.
40 |
41 | ```javascript
42 | function onBeforeRender(sender) {
43 | var dashboardControl = sender.GetDashboardControl();
44 | dashboardControl.registerExtension(new CustomItems.WebPageItemExtension(dashboardControl));
45 | }
46 | ```
47 |
48 |
49 | ## Settings
50 | The **Web Page** dashboard item supports the following setting that you can configure in the Web Dashboard UI:
51 | 
52 | * **URL** - Specifies a web page URL. You can set a single page as well as a set of pages (e.g., https://en.wikipedia.org/wiki/{0}). If you add a dimension and specify a placeholder, the data source field returns strings that will be inserted in the position of the {0} placeholder. Thus, the Web Page item joins the specified URL with the current dimension value and displays the page located by this address.
53 |
54 | ## Development
55 |
56 | You can use this extension code as a base for your own [dashboard item extension](https://documentation.devexpress.com/#Dashboard/CustomDocument117546) development.
57 |
58 | Before you start, we advise you to [fork](https://help.github.com/articles/fork-a-repo/) this repository and work with your own copy.
59 |
60 | 1. Clone this extension to get a local copy of the repository.
61 | ```Batchfile
62 | git clone https://github.com/DevExpress/dashboard-extension-webpage-item.git
63 | cd dashboard-extension-webpage-item
64 | ```
65 |
66 | 2. In this extension we use the [Node.js](https://nodejs.org/en/about/) toolset. Use the command below to install all modules listed as dependencies in the extension's **package.json** file.
67 | ```Batchfile
68 | npm install
69 | ```
70 |
71 | 3. Then install [Gulp](http://gulpjs.com) to build the solution. You can install it globally...
72 | ```Batchfile
73 | npm install -g gulp
74 | gulp build
75 | ```
76 |
77 | ... or use a local Gulp version.
78 | ```Batchfile
79 | .\node_modules\.bin\gulp build
80 | ```
81 |
82 | You can find the resulting files at ```...\dashboard-extension-webpage-item\dist```:
83 | **webpage-extension.js** and **webpage-extension.min.js**.
84 |
85 | ## License
86 |
87 | This extension is distributed under the **MIT** license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can [review the license terms](https://www.devexpress.com/Support/EULAs/NetComponents.xml) or [download a free trial version](https://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx) of the Dashboard suite at [DevExpress.com](https://www.devexpress.com).
88 |
89 | ## Support & Feedback
90 |
91 | * Refer to [this section](https://documentation.devexpress.com/#Dashboard/CustomDocument117232) for general information about client-side extensions.
92 | * To learn how to create a custom item, see the following [KB article](https://www.devexpress.com/Support/Center/Question/Details/T491984).
93 | * To address questions regarding the Web Dashboard and JavaScript API, use [DevExpress Support Center](https://www.devexpress.com/Support/Center).
94 |
--------------------------------------------------------------------------------
/dist/webpage-extension.js:
--------------------------------------------------------------------------------
1 | var __extends = (this && this.__extends) || function (d, b) {
2 | for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
3 | function __() { this.constructor = d; }
4 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
5 | };
6 | ///
7 | var CustomItems;
8 | (function (CustomItems) {
9 | CustomItems.WEBPAGE_EXTENSION_NAME = 'WebPage';
10 | CustomItems.webPageMeta = {
11 | bindings: [{
12 | propertyName: 'Attribute',
13 | dataItemType: 'Dimension',
14 | array: false,
15 | displayName: "Attribute",
16 | emptyPlaceholder: 'Set Attribute',
17 | selectedPlaceholder: "Configure Attribute"
18 | }],
19 | properties: [{
20 | propertyName: 'Url',
21 | editor: DevExpress.Dashboard.Metadata.editorTemplates.text,
22 | displayName: "Url",
23 | sectionName: "Custom Options",
24 | defaultVal: 'https://en.wikipedia.org/wiki/{0}'
25 | }],
26 | icon: CustomItems.WEBPAGE_EXTENSION_NAME,
27 | title: "Web Page",
28 | index: 2
29 | };
30 | })(CustomItems || (CustomItems = {}));
31 | ///
32 | var CustomItems;
33 | (function (CustomItems) {
34 | CustomItems.WEBPAGE_ICON = "\n\n\n";
35 | })(CustomItems || (CustomItems = {}));
36 | ///
37 | ///
38 | var CustomItems;
39 | (function (CustomItems) {
40 | var webPageItem = (function (_super) {
41 | __extends(webPageItem, _super);
42 | function webPageItem(model, $container, options) {
43 | var _this = _super.call(this, model, $container, options) || this;
44 | _this._iframe = undefined;
45 | return _this;
46 | }
47 | webPageItem.prototype.renderContent = function ($element, changeExisting, afterRenderCallback) {
48 | var attribute;
49 | if (!changeExisting || !this._iframe) {
50 | this._iframe = $('