Welcome component at Dashboard Cards - Icon issue

Maarten1 · ‎10-25-2017

Hello there,

According to documentation https://dev.weebly.com/welcome-component.html.
I've created dashboard welcome card, i've prepared svg icon, but this wouldn't work.

"dashboard_cards": [{
		"name": "welcome",
		"icon": "60x60-KeywordMate-icon.svg",
		"version": "0.1.0",
		"link": "******************************************",
		"default": [{
			"type": "welcome",
			"headline": "Keywordmate",
			"text": "KeywordMate’s unique algorithm will help you find powerful keyword suggestions on high-search volume, that will help you attract more potential buyers.",
			"action_label": "Get Started",
			"action_link": "****************************************"
		}]
	}

Icon not showing up
https://scr.hu/V9ywoz

Can any help me ? what i'm doing wrong ?
What should I do to icon will be appeared at KeywordMate headline
https://scr.hu/gm5gKJ

We checked in source code that website searching icon from bellow location

https://scr.hu/L43l8A

I don't have any credentials to log in and put icon in such directory from screenshot.

devsupport · ‎10-26-2017

A couple of questions:

1. Is that the root-relative path to your icon in the .zip file you are uploading?

That would mean that the icon you are referencing would be located at the root of your .zip file.

2. Why isn't the file name matching in the console's 404 message as compared to your filename in the manifest.json you provided?

In the manfiest.json: 60x60-KeywordMate-icon.svg
In the 404 message: 60x60.png

Is this the same app? Are you sure the 404 you've provided is for the correct element in the page?

Example dashboard card app directory structure and manifest.json

Here is an example, let's use the following .zip file structure:

/
  assets/
    icon.svg
  manifest.json

This means we should have a directory named `assets` at the root of the .zip file we upload.

In this case, the `manifest.json` for a dashboard card to implement this icon file would look something like this:

"dashboard_cards": [
        {
            "name": "devcommunityexample",
            "version": "1.0.0",
            "label": "Example Card",
            "icon": "assets/icon.svg",
            "link": "https://myexampledomain.com/setup/:jwt",
            "default": [
                {
                    "type": "text",
                    "title": "Example Card Text Content",
                    "value": "Some example value"
                }
            ]
        }
    ]

If you can confirm the .zip file you're uploading as the correct icon file (with correct filename) at the root of the .zip file, and that the manifest.json file is accurate, then you might want to uninstall/reinstall the app to see if any previous versions are being cached.

Check on this and provide the results of what you find please.

Maarten1 · ‎10-27-2017

Q. Is that the root-relative path to your icon in the .zip file you are uploading?
A: Yes

Q: Why isn't the file name matching in the console's 404 message as compared to your filename in the manifest.json you provided?
A: I don't know, this is a source code weebly page constructor display client page overview
https://scr.hu/L43l8A
https://scr.hu/YWw95G

I'm wondering how to upload icon directly to this location.

I've tried your example and example source code from github
https://github.com/Weebly/php-webhook-client/tree/master/platform-element

But it still doesn't work, i've tried icon name change and get icon from soruce code from github
without results.

Maarten1 · ‎10-27-2017

"dashboard_cards": [
		{
			"name": "welcome",
			"icon": "assets/icon.svg",
			"version": "0.1.8",
			"link": "https://weebly-sso.keywordmate.com/oauth/token?token=:jwt",
			"default": [
				{
					"type": "welcome",
					"headline": "Keywordmate",
					"text": "KeywordMate’s unique algorithm will help you find powerful keyword suggestions on high-search volume, that will help you attract more potential buyers.",
					"action_label": "Get Started",
					"action_link": "https://weebly-sso.keywordmate.com/oauth/token?token=:jwt"
				}
			]
		}
	]

https://scr.hu/pGWXz8

https://scr.hu/z7e2VJ

Above you can find my code with assets and code structure.

Maarten1 · ‎10-27-2017

My colleague from team tried also:

Added 60x60.png to the root.
Renamed the files
Changed version numbers, minor and patch.
Changing dashboard-card id
Multiple cards, with all different ids and icon settings
Only the path, not the filename.

devsupport · ‎10-27-2017

And still you did not see the Dashboard Card icon in the header?

Maarten1 · ‎10-29-2017

No, the icons never changed. It keeps looking for a 60x60.png (even tough we don't have set any of the icons in the manifest to a 60x60.png image). Even for new generated dashboard cards. The weird thing is, there even is a 60x60.png in the package root, but even that doesn't show.

The screenshot below shows all the things mentioned above, we uploaded a draft with multiple cards, all different names and icon settings.

https://screenshots.firefox.com/4VYX2Ip7mhc1XG1K/www.weebly.com

(One of) The 60x60.png that returns 404;

https://marketplace.editmysite.com/cards/802646842/344284709281845079-1.0.0/60x60.png

The app version that is not working is in draft status, but we have also a published version. The published version doesn't have dashboard cards. Our new version app isn't approved because the icon doesn't work.

devsupport · ‎10-30-2017

Hey @Maarten

While this sample app is not "complete", it is complete enough to see the dashboard card and its icon displaying in my Weebly Test Site.

Here is the source code for the sample app (which includes an icon): https://github.com/bdeanindy/dashboard-card-sample

Attached is a screenshot of the dashboard card running in my Weebly Developer Test Site.

I just uploaded this, so I know it is working as expected, let me know if this helps answer your question(s).

Maarten1 · ‎11-02-2017

Hi,

I've tried to follow bellow steps but i'm stuck at searching manifest.json.tmpl

https://github.com/bdeanindy/dashboard-card-sample

https://github.com/bdeanindy/dashboard-card-sample/blob/master/manifest.json.tmpl

(Github returned me response 404 error)

I can't compare my manifest.json with manifest.json.tmpl from your code example.

Do you've such manifest configuration ?

Regards.

devsupport · ‎11-02-2017

Hey @Maarten, sorry about forgetting to include the most important file sir.
I have updated the Github repository (it now contains the `manifest.json.tmpl` file for your use sir).
Additionally, I'm going to stay online and work on finalizing the Dashboard Card Sample App right now, so feel free to chat via Github if you'd like.

Here is the newly added file: https://github.com/bdeanindy/dashboard-card-sample/blob/master/manifest.json.tmpl

You may see changes in the sample app code over the next 1-2 hours, if you need help, HMU via Github Issue Tracker.

devsupport · ‎11-02-2017

I have just pushed the `manifest.json.tmpl` file for your use (apologies for not including that file in my initial push of this repository).

If you hit snags, or run into any problems, please report issues in the GH issue tracker for this code:
https://github.com/bdeanindy/dashboard-card-sample/issues

Feel free to contribute any improvements, or make any suggestions for how this could help you (or other developers in our community more effectively).