{"id":29170414,"url":"https://github.com/ahwelgemoed/app-guide-mendix-widget","last_synced_at":"2025-10-05T12:35:52.590Z","repository":{"id":41065113,"uuid":"308059174","full_name":"ahwelgemoed/app-guide-mendix-widget","owner":"ahwelgemoed","description":"A Widget to Showcase new Features in your App, or created a Guided tour in your app.","archived":false,"fork":false,"pushed_at":"2022-06-28T07:04:25.000Z","size":2332,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-03-05T04:02:53.404Z","etag":null,"topics":["mendix","mendix-widget","widget"],"latest_commit_sha":null,"homepage":"https://appstore.home.mendix.com/link/app/115870/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ahwelgemoed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-28T15:26:32.000Z","updated_at":"2022-06-28T07:04:29.000Z","dependencies_parsed_at":"2022-09-06T19:40:37.811Z","dependency_job_id":null,"html_url":"https://github.com/ahwelgemoed/app-guide-mendix-widget","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/ahwelgemoed/app-guide-mendix-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2Fapp-guide-mendix-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2Fapp-guide-mendix-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2Fapp-guide-mendix-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2Fapp-guide-mendix-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahwelgemoed","download_url":"https://codeload.github.com/ahwelgemoed/app-guide-mendix-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahwelgemoed%2Fapp-guide-mendix-widget/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262964082,"owners_count":23391950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mendix","mendix-widget","widget"],"created_at":"2025-07-01T12:40:00.664Z","updated_at":"2025-10-05T12:35:52.479Z","avatar_url":"https://github.com/ahwelgemoed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c/br\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ca align=\"center\" href=\"https://github.com/mendixlabs/app-services-components\"\u003e\n\u003cspan align=\"center\"\u003e\n⚠️ This Repo has been moved. Click To View ⚠️\n\u003c/span\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003c/br\u003e\n\n\u003ch1 align=\"center\"\u003eApp Guide For Mendix\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/issues/ahwelgemoed/app-guide-mendix-widget\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"\"\u003e\n    \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/release/ahwelgemoed/app-guide-mendix-widget\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://appstore.home.mendix.com/link/modeler/\"\u003e\n    \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/badge/Studio%20version-8.0%2B-blue.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://docs.mendix.com/developerportal/app-store/app-store-content-support\"\u003e\n    \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/badge/Support-Community%20(no%20active%20support)-orange.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"/LICENSE\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/license-Apache%202.0-orange.svg\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \n\u003c/p\u003e\n \u003cimg  align=\"center\" alt=\"headerIMG\" src=\"./assets/AppGuide.png\" target=\"_blank\" /\u003e\n\n### A Widget to Showcase new Features in your App, or created a Guided tour in your app.\n\nThe basic idea is that you add a unique class name to an element (div, h1, etc.) and then add that class name to the\nwidget, you give it a title and a description and that will create a guided introduction to your app. This will take the\nuser on a step by step journey through the App.\n\n## Features\n\n-   Highlight Important information or key aspect is Complex Apps.\n\n-   As the value is stored in the Data Model, this can be dynamically turned on or off based on actions in your app.\n\n## Reasons to Use\n\nCurrently there is another Widget available ([Guided Tour](https://appstore.home.mendix.com/link/app/115336/)) it uses\nthe same underling React Lib, the difference between this Widget and that is as follows:\n\n|                                | App Guide | Guided Tour                       |\n| ------------------------------ | --------- | --------------------------------- |\n| Attribute Stored in Data Model | ✅        | ❌ _(Uses Local Browser Storage)_ |\n| Solves Scroll Bug \\*           | ✅        | ❌                                |\n| Works Across Pages             | ✅        | ❌                                |\n\nThis widget also solves a Race condition when Mendix app is loading and the Widget is initializing.\n\n_\\* As most Mendix apps use a fixed window hight and scrolls a containing div, this causes issues when the desired\nhighlighted point is not in the Viewport on page load._\n\n## Usage\n\nThere are Various Options Available with some caveat's:\n\n|                        | Type    | Desc                                                                                                                                                                                                                                                         |\n| ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| Welcome attribute      | Boolean | Attribute from the data model to either Show or hide app guide. _Recommended Naming Convention_ `hasSeen_xxx` as false will SHOW the Widget and true will HIDE it                                                                                            |\n| On Complete            | Action  | Usually a Microflow to change the Welcome Attribute, is shows that the user has completed the App Guide. Changes the Welcome attribute from truthy to falsy. Can also be a Page Call, as you can implement the guide on multiple pages and \"connect\" them to |\n| On Complete Page Call? | Boolean | If the guide is Navigating to a different page, this must be set to True.                                                                                                                                                                                    |\n| Show Skip Button       | Boolean | Show the skip button in the floating card                                                                                                                                                                                                                    |\n| Show Progress          | Boolean | Show the progress in the floating card                                                                                                                                                                                                                       |\n|                        |         |                                                                                                                                                                                                                                                              |\n\n| Object list group | List         | List of items to Show cards for                                                                                  |\n| ----------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- |\n| Classname         | String       | The class name to attache it self to. This must be unique per Item                                               |\n| Title             | String       | Title of the Card                                                                                                |\n| Content           | Multi-String | Description of Card                                                                                              |\n| Position          | Multi-String | Position of the floating card. It will try its best but will break away if it cant fit the card in the view port |\n|                   |              |                                                                                                                  |\n|                   |              |                                                                                                                  |\n\n### Screen Shots\n\n![datasource](./assets/SS1.png)\n\n![datasource](./assets/SS2.png)\n\n![datasource](./assets/SS3.png)\n\n-   Hex values to change card settings\n\n## Known Issues\n\n-   None\n\n## Issues, suggestions and feature requests\n\n[Github Issues](https://github.com/ahwelgemoed/app-guide-mendix-widget/issues \"Github Issues\")\n\n## License\n\nApache 2\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahwelgemoed%2Fapp-guide-mendix-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahwelgemoed%2Fapp-guide-mendix-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahwelgemoed%2Fapp-guide-mendix-widget/lists"}