electron-windows-secondary-tiles

Pin secondary tiles on Windows 10 from Electron Apps

``



npm install --save electron-windows-secondary-tiles





Pinning a Secondary Tile

Pinning tiles is only availble in the context of UWP Apps and therefor your Electron must be packaged via the Desktop Bridge. A easy way to create a UWP package for an Electron App is via

electron-windows-store

.  There are 2 methods available to pin a secondary tile.



First, the most simple variation:



RequestCreate(hWnd, tileId, displayName, args, squareLogo150x150Uri, showNameOnSquare150x150Logo, roamingEnabled);

Object

 hWnd - The native handle to the Apps Window. Use: mainWindow.getNativeWindowHandle();

*

string

 tileId - Id of the tile

*

string

 displayName - Display name shown on the Tile

*

string

 args - Arguments forwarded to the App when Tile is clicked

*

string

 squareLogo150x150Uri - A path to the 150x150 icon

*

boolean

 showNameOnSquare150x150Logo - Indicates whether the dispaly name is shown on the Tile

*

boolean

 roamingEnabled - Indicates whether the Tile should be roamed across devices



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



let hwnd = mainWindow.getNativeWindowHandle();

SecondaryTiles.RequestCreate(hwnd, 'tile1', 'Hello Tile 1

, 'myargs', 'ms-appx:///assets/SampleAppx.150x150.png', true, false);
``





The second variation lets you set all possible parameter of a tile via an options object.



RequestCreateWithOptions (hWnd, tileId, displayName, args, tileSize, tileOptions)

Object

 hWnd - The native handle to the Apps Window. Use: mainWindow.getNativeWindowHandle();

*

string

 tileId - Id of the tile

*

string

 displayName - Display name shown on the Tile

*

string

 args - Arguments forwarded to the App when Tile is clicked

*

number

 tileSize - Desired tile size. 0 - Default, 1 - Square150x150, 2 - Wide310x150

*

Object

 tileOptions - An object carrying all possible option for Live Tiles



The option parameter can carry the following parameters:



*

string

 Square70x70Logo - The path to icon shown on the small Tile.

*

string

 Square150x150Logo - The path to icon shown on the medium Tile.

*

string

 Wide310x150Logo - The path to icon shown on the wide Tile.

*

string

 Square310x310Logo - The path to icon shown on the large Tile.

*

string

 BackgroundColor - The color of Tile. Leave empty to use systems accent color.

*

string

 ForegroundText - Indicates whther to use dark or light forground color. 0 - Dark , 1 - Light

*

string

 ShowNameOnSquare150x150Logo - Indicates whether the dispaly name is shown on the medium Tile

*

string

 ShowNameOnWide310x150Logo - Indicates whether the dispaly name is shown on the wide Tile

*

string

 ShowNameOnSquare310x310Logo - Indicates whether the dispaly name is shown on the large Tile

*

string

 RoamingEnabled - Indicates whether the Tile should be roamed across devices





$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



var options = {

    Square70x70Logo: "ms-appx:///assets/SampleAppx.70x70.png",

    Square150x150Logo: "ms-appx:///assets/SampleAppx.150x150.png",

    Wide310x150Logo: "ms-appx:///assets/SampleAppx.310x150.png",

    Square310x310Logo: "ms-appx:///assets/SampleAppx.310x310.png",

    BackgroundColor: "#0026FF",

    ForegroundText: 1,

    ShowNameOnSquare150x150Logo: true,

    ShowNameOnWide310x150Logo: true,

    ShowNameOnSquare310x310Logo: true,

    RoamingEnabled: true

    }



let hwnd = mainWindow.getNativeWindowHandle();

SecondaryTiles.RequestCreateWithOptions(hwnd, 'tile2', 'Hello Tile 2', 'myargs', 0, options);





Updating a Secondary Tile

Updating tiles uses the exact same parameters as creating tiles minus the window handle. Just use the counter part methods

RequestUpdate and RequestUpdateWithOptions

;



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



var options = {

    Square70x70Logo: "ms-appx:///assets/SampleAppx.70x70.png",

    Square150x150Logo: "ms-appx:///assets/SampleAppx.150x150.png",

    Wide310x150Logo: "ms-appx:///assets/SampleAppx.310x150.png",

    Square310x310Logo: "ms-appx:///assets/SampleAppx.310x310.png",

    BackgroundColor: "#0026FF",

    ForegroundText: 0,

    ShowNameOnSquare150x150Logo: false,

    ShowNameOnWide310x150Logo: false,

    ShowNameOnSquare310x310Logo: false,

    RoamingEnabled: true

    }



SecondaryTiles.RequestUpdateWithOptions('tile2', 'Hello Tile 2 updated', 'myargs', 0, options);





Deleting Secondary Tile

In order to delete a Tile its Id needs to be known.



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



SecondaryTiles.RequestDelete(

tile1

);





Checking a Secondary Tile

With a given Id the existence of an Tile can be checked.



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



SecondaryTiles.Exists(

tile1

);





Sending notifications to a Secondary tiles

Each Tile can be a receiver of notifications. The notifications can be differently formatted. The content and layout is defined via XML snippets. See the documentation

here

.



> :warning: BEWARE: Secondary Tile notifications were broken in the Fall Creators Update. Microsoft shipped a fix for RS4. The notification method check for a min version of 10.0.17134.81. On any OS version below that, Notifications will be ignored.



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



SecondaryTiles.Notify(

tile1,

Jennifer Parker

Jennifer Parker

Jennifer Parker

Jennifer Parker

);

``

License

MIT. Please see LICENSE for details.

electron-windows-secondary-tiles

Pin secondary tiles on Windows 10 from Electron Apps

``



npm install --save electron-windows-secondary-tiles





Pinning a Secondary Tile

Pinning tiles is only availble in the context of UWP Apps and therefor your Electron must be packaged via the Desktop Bridge. A easy way to create a UWP package for an Electron App is via

electron-windows-store

.  There are 2 methods available to pin a secondary tile.



First, the most simple variation:



RequestCreate(hWnd, tileId, displayName, args, squareLogo150x150Uri, showNameOnSquare150x150Logo, roamingEnabled);

Object

 hWnd - The native handle to the Apps Window. Use: mainWindow.getNativeWindowHandle();

*

string

 tileId - Id of the tile

*

string

 displayName - Display name shown on the Tile

*

string

 args - Arguments forwarded to the App when Tile is clicked

*

string

 squareLogo150x150Uri - A path to the 150x150 icon

*

boolean

 showNameOnSquare150x150Logo - Indicates whether the dispaly name is shown on the Tile

*

boolean

 roamingEnabled - Indicates whether the Tile should be roamed across devices



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



let hwnd = mainWindow.getNativeWindowHandle();

SecondaryTiles.RequestCreate(hwnd, 'tile1', 'Hello Tile 1

, 'myargs', 'ms-appx:///assets/SampleAppx.150x150.png', true, false);
``





The second variation lets you set all possible parameter of a tile via an options object.



RequestCreateWithOptions (hWnd, tileId, displayName, args, tileSize, tileOptions)

Object

 hWnd - The native handle to the Apps Window. Use: mainWindow.getNativeWindowHandle();

*

string

 tileId - Id of the tile

*

string

 displayName - Display name shown on the Tile

*

string

 args - Arguments forwarded to the App when Tile is clicked

*

number

 tileSize - Desired tile size. 0 - Default, 1 - Square150x150, 2 - Wide310x150

*

Object

 tileOptions - An object carrying all possible option for Live Tiles



The option parameter can carry the following parameters:



*

string

 Square70x70Logo - The path to icon shown on the small Tile.

*

string

 Square150x150Logo - The path to icon shown on the medium Tile.

*

string

 Wide310x150Logo - The path to icon shown on the wide Tile.

*

string

 Square310x310Logo - The path to icon shown on the large Tile.

*

string

 BackgroundColor - The color of Tile. Leave empty to use systems accent color.

*

string

 ForegroundText - Indicates whther to use dark or light forground color. 0 - Dark , 1 - Light

*

string

 ShowNameOnSquare150x150Logo - Indicates whether the dispaly name is shown on the medium Tile

*

string

 ShowNameOnWide310x150Logo - Indicates whether the dispaly name is shown on the wide Tile

*

string

 ShowNameOnSquare310x310Logo - Indicates whether the dispaly name is shown on the large Tile

*

string

 RoamingEnabled - Indicates whether the Tile should be roamed across devices





$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



var options = {

    Square70x70Logo: "ms-appx:///assets/SampleAppx.70x70.png",

    Square150x150Logo: "ms-appx:///assets/SampleAppx.150x150.png",

    Wide310x150Logo: "ms-appx:///assets/SampleAppx.310x150.png",

    Square310x310Logo: "ms-appx:///assets/SampleAppx.310x310.png",

    BackgroundColor: "#0026FF",

    ForegroundText: 1,

    ShowNameOnSquare150x150Logo: true,

    ShowNameOnWide310x150Logo: true,

    ShowNameOnSquare310x310Logo: true,

    RoamingEnabled: true

    }



let hwnd = mainWindow.getNativeWindowHandle();

SecondaryTiles.RequestCreateWithOptions(hwnd, 'tile2', 'Hello Tile 2', 'myargs', 0, options);





Updating a Secondary Tile

Updating tiles uses the exact same parameters as creating tiles minus the window handle. Just use the counter part methods

RequestUpdate and RequestUpdateWithOptions

;



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



var options = {

    Square70x70Logo: "ms-appx:///assets/SampleAppx.70x70.png",

    Square150x150Logo: "ms-appx:///assets/SampleAppx.150x150.png",

    Wide310x150Logo: "ms-appx:///assets/SampleAppx.310x150.png",

    Square310x310Logo: "ms-appx:///assets/SampleAppx.310x310.png",

    BackgroundColor: "#0026FF",

    ForegroundText: 0,

    ShowNameOnSquare150x150Logo: false,

    ShowNameOnWide310x150Logo: false,

    ShowNameOnSquare310x310Logo: false,

    RoamingEnabled: true

    }



SecondaryTiles.RequestUpdateWithOptions('tile2', 'Hello Tile 2 updated', 'myargs', 0, options);





Deleting Secondary Tile

In order to delete a Tile its Id needs to be known.



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



SecondaryTiles.RequestDelete(

tile1

);





Checking a Secondary Tile

With a given Id the existence of an Tile can be checked.



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



SecondaryTiles.Exists(

tile1

);





Sending notifications to a Secondary tiles

Each Tile can be a receiver of notifications. The notifications can be differently formatted. The content and layout is defined via XML snippets. See the documentation

here

.



> :warning: BEWARE: Secondary Tile notifications were broken in the Fall Creators Update. Microsoft shipped a fix for RS4. The notification method check for a min version of 10.0.17134.81. On any OS version below that, Notifications will be ignored.



$3



const {SecondaryTiles} = require('electron-windows-secondary-tiles')



SecondaryTiles.Notify(

tile1,

Jennifer Parker

Jennifer Parker

Jennifer Parker

Jennifer Parker

);

``

License

MIT. Please see LICENSE for details.