Med widgets gör du din app interaktiv för Upsales-användare.

Widgets finns på några hotspots och används också för att visa detaljer för
egna marknadshändelser och notiser från app callback.

Så deklarerar du widgets i din app Json

Om du bara använder widgets för notiser från app callback eller egna marknadshändelser kan du hoppa över den här delen och scrolla ned till Widget-objekt.

I din app Json lägger du under uiElements till vyn du vill använda som nyckel. Värdet är ett objekt med hotspoten som nyckel, och hotspotens värde är en array med varje widget. En widget är ett objekt som ser ut så här: {"name": "myWidget", "type": "widget"}

Ja, vi vet, vi vet – den förklaringen kan vara lite förvirrande. Titta på exemplet längre ned i stället! 😅

Tillgängliga hotspots

Företagsvy

Visa en widget när användaren tittar på ett företag.

• accountCardTop 
• sidebarTop

• sidebar 

  "uiElements": {
     "account": {
        "accountCardTop": [],
        "sidebarTop": [],
        "sidebar": []
     }
  }

Kontaktpersonsvy

Visa en widget när användaren tittar på en kontaktperson.

• sidebar 

  "uiElements": {
     "contact": {
        "sidebar": []
     }
  }

Vy för försäljning och affärsmöjlighet

Visa en widget när användaren tittar på en försäljning eller affärsmöjlighet

• sidebar 

  "uiElements": {
     "editOrder": {
        "sidebar": []
     }
  }

Abonnemangsvy

Visa en widget när användaren tittar på ett abonnemang

• sidebar 

  "uiElements": {
     "editSubscription": {
        "sidebar": []
     }
  }

Vy för att redigera möte

Visa en widget när användaren tittar på ett möte

• sidebar 

  "uiElements": {
     "editAppointment": {
        "sidebar": []
     }
  }

Vy för att redigera aktivitet och samtal

Visa en widget när användaren tittar på en aktivitet eller ett samtal

• sidebar 

  "uiElements": {
     "editActivity": {
        "sidebar": []
     }
  }

Exempel:
Visa en widget i vyn för försäljning och affärsmöjlighet genom att lägga till det här i din app Json.

{
...
 "uiElements": {
    "editOrder": {
       "sidebar": [
          {
             "name": "myWidget",
             "type": "widget"
          }
       ]
    } 
 }
...
}

När en användare öppnar vyn för att redigera försäljning görs en POST till appens endpoint /widget/<widgetName>, t.ex.

https://myapp.com/widget/myWidget

Svara med ett widget-objekt (mer information längre ned).

Tips! Om du bara vill visa en widget på hotspoten när vissa villkor är uppfyllda svarar du helt enkelt med statuskoden 404, så döljs widgeten.

Widget-objekt

Ett widget-objekt består av följande egenskaper

• icon

En textsträng eller en (https-)url till en bild som används som logotyp för din widget. Utelämna den om du inte vill visa någon logotyp.

• rows

En array med widget-rader (se Widget-rad längre ned).

• click

En valfri klickåtgärd för widgeten (se Click längre ned). Den gör hela widgeten klickbar. Om du bara vill att en knapp eller en rad ska vara klickbar använder du i stället egenskapen click i en widget-rad.
Exempel på widget-objekt

{
 "icon": "https://widget-icon.png",
 "rows": [
 {
 "type": "text",
 "text": "This is a widget, yay!"
 }
 ],
 "click": {
 "type": "widget",
 "name": "secondWidget"
 }
}

Widget-rad

Din widget kan bestå av en eller flera rader. Det är raderna som bygger upp widgetens innehåll och åtgärder.

Radtyper

• text

Visar en textsträng.

{ 
 "type": "text", 
 "text": "This is my text row"
}

markdown Experimentell!

Använd markdown för att formatera texten i raden.

{ 
 "type": "markdown", 
 "markdown": "Some **markdown** yay!"
}

iframe Experimentell!

Visa din html eller webbsida i en iframe.

{ 
 "type": "iframe", 
 "url": "https://www.example.com"
}

{ 
 "type": "iframe", 
 "html": "Some <b>html</b> yay!"
}

Du kan ställa in några alternativ för din iframe med egenskaperna width, height och scrolling (true/false)

{ 
 "type": "iframe", 
 "html": "200x20px with<br><br>scroll", 
 "width": 200, 
 "height": 20, 
 "scrolling": true
}

image

Visar en bild.

{ 
 "type": "image", 
 "url": "https://image.png", 
 "center": true 
}

buttons

Visar en eller flera knappar.

{ 
 "type": "buttons", 
 "options": [ 
 { 
 "text": "a button", 
 "fullWidth": false, 
 "click": { 
 "type": "widgetRow", 
 "name": "aNewRow" 
 }
 }
 ] 
}

dropdown

Visa en rullgardinsmeny med ett eller flera alternativ.

{ 
 "type": "dropdown", 
 "options": [ 
 { 
 "text": "a button", 
 "click": { 
 "type": "widgetRow", 
 "name": "aNewRow" 
 }
 }
 ] 
}

button

Visar en enskild knapp. Sätt ”fullWidth” till true för att den ska fylla hela widgeten.

{ 
 "type": "button", 
 "text": "a button", 
 "fullWidth": false, 
 "click": { 
 "type": "widgetRow", 
 "name": "aNewRow" 
 }
}

title

Visar en rubrik.

{ 
 "type": "title", 
 "text": "My title"
}

separator

Visar en horisontell linje mellan rader.

{ 
 "type": "separator"
}

link

Visar en länk som öppnar ”href” i en ny flik.

{ 
 "type": "link", 
 "text": "Open in my app", 
 "href": "https://www.example.com"
}

cols

Placerar rader bredvid varandra. Varje kolumn innehåller en rad i sin egenskap ”element”.

{ 
 "type": "cols", 
 "cols": [ 
 { "element": { "type": "text", "text": "Left" } }, 
 { "element": { "type": "text", "text": "Right" } }
 ]
}

Click

Med klick blir din widget interaktiv. Du kan länka till externt innehåll och ladda nya widgets och widget-rader.

Klick finns på följande objekt

• Själva widgeten
• Widget-rad av typen text
• Widget-rad av typen image
• Alternativen i widget-rad av typen buttons
• Widget-rad av typen button
• Alternativen i widget-rad av typen dropdown

Klicktyper

• widget

Ersätter widgeten med en ny. Vi gör ett anrop till https://your-app.com/widget/<newWidget>, där <newWidget> är värdet du anger i klickets egenskap ”name”.

"click": { 
 "type": "widget", 
 "name": "myNewWidget" 
}

Din app måste svara med ett nytt widget-objekt.

widgetRow

Ersätter widget-raden med en ny. Vi gör ett anrop till https://your-app.com/widgetRow/<newRow>, där <newRow> är klickets egenskap ”name”.

"click": { 
 "type": "widgetRow", 
 "name": "myWidgetRow" 
}

Din app måste svara med ett nytt widget-radobjekt.

window

Öppnar ett nytt fönster med url:en från klickets egenskap ”url”.
Lägg till "window":"self" i click-objektet om du vill att url:en ska öppnas i samma fönster.

"click": { 
 "type": "window", 
 "url": "https://www.upsales.com"
}

modal

Öppnar en ny widget i en modal. Vi gör ett anrop till https://your-app.com/widget/<newWidget>, där <newWidget> är värdet du anger i klickets egenskap ”name”.

"click": { 
 "type": "modal", 
 "name": "myWidgetModal",
 "fullscreen": false
}

Din app måste svara med ett nytt widget-objekt.

Ställ in modalens bredd med egenskapen ”size”: sm, md, lg eller xl. Om ”fullscreen” är true fyller modalen hela skärmen och ”size” ignoreras.

closeModal

Stänger modalen. Använd den på en knapp i en widget som har öppnats med klicktypen modal.

"click": {
 "type": "closeModal"
}

navigate Experimentell!

Skicka användaren till en vy i Upsales som du anger med egenskapen ”to”.

Tillgängliga värden

• config (appens konfiguration. Lägg till "user": true för att i stället öppna användarens egna appinställningar)
• account (företagskortet med id från egenskapen ”id”)
• contact (kontaktkortet med id från egenskapen ”id”)
• campaign (kampanjen med id från egenskapen ”id”)
• form (formuläret med id från egenskapen ”id”)

"click": {
 "type": "navigate",
 "to": "account",
 "id": 1234567
}

create Experimentell!

Öppnar en vy där användaren skapar ett objekt. Ange objekttypen med egenskapen ”entity”.

Tillgängliga värden

• activity
• appointment
• opportunity

Använd egenskapen ”options” för att lägga till fördefinierade värden i objektet.

"click": {
 "type": "create", 
 "entity": "activity", 
 "options": {
 "description": "My activity...",
 "date": "2018-12-01"
 }
}

reload

Laddar om widgeten. Perfekt när du utvecklar!