Sizing display panel properly

[cfritze64]

Hi John:

I’ve got a script I use to query a CRM app via its API to retrieve contact information and display the info in immediately useable form + show me a headshot if it’s in the database. When I run this, the app doesn’t size its window to fully show the results. The panel cuts off half the intended display; I can resize the app’s window to reveal all, but would like not to have to do that. I think the height of the scriptkit app window is being determined by the number of hits returned rather than the size of the preview panel, could that be? I’m hacky at CSS, so would benefit from some advice: do I try to change things in the await arg call at the top of found(), or try to modify the html that I pass to the panel? Thx

• Christian

// Shortcut: control alt c
// query CiviCRM v3 api with surname to browse/copy contact info

//can add other search terms in raw format if you start with "" to indicate blank last_name field

const BASE_URL = await env('CIVI_BASE_URL');
const CIVI_API = await env('CIVI_API_KEY');
const CIVI_SECRET = await env('CIVI_API_SECRET');


let theQuery = await arg('Search for last name in CiviCRM:');

let found = await arg(`records with last name ${theQuery}`,

//function to construct an array of responses
async () => {
  var theText = [];
  const url = `${BASE_URL}?entity=Contact&action=get&api_key=${CIVI_API}&key=${CIVI_SECRET}&sequential=1&return=display_name,street_address,city,postal_code,email,phone,custom_7,image_URL&json=1&last_name=${theQuery}`;
  let response = await get(url);
  const theData = response.data.values;

 theText = theData.map((person,index) => {

   //deconstrut the object
   let {display_name, street_address, city, postal_code, phone, email, image_URL, custom_7 } = person;

    //strip parens from phone number
    const subst = `$1`;
    const regex = /\((\d{3})\)/gm;
    const regex2 = / /gm;
    const subst2 = `-`;
    const newphone = phone.replace(regex, subst).replace(regex2,subst2);

    //return formatted for scriptkit display panel
    return {
      name: `${index+1}. ${display_name}`,
      value: `${display_name}\n${street_address}\n${city} ${postal_code}\n${newphone}\n${email}\n${custom_7.toLowerCase()}`,
      description: `${street_address} ${city} ${postal_code}`,
      preview: `<img width = "125" src ="${image_URL}"></br><a href="tel://${newphone}">${newphone}</a></br><a href="mailto:${email}">${email}</a></br>${custom_7.toLowerCase()}`
    }

  }); // end map

return(theText)

}) // end function

copy(found); // can copy data from the panel, or this command copies the whole of the selected entry

[johnlindquist]

An easy fix is add some empty rows to increase the height:

import "@johnlindquist/kit"

let numbers = ["one", "two", "three"]
let padding = ["", "", "", "", ""]

let data = [...numbers, ...padding]

await arg("", async input => {
  return data.map(n => ({
    name: n,
    preview: `<div>${n}</div>`,
  }))
})

CSS

You could definitely position the info to the side of the image. Anything is possible really.

Future: Fixed size/position

I'm considering adding a feature where you could add a "fixed/locked size/position" to a script where it retains size until you manually send another size/position.

[cfritze64]

Huh. Adding pads to the preview didn't do it. I wound up pushing some empty objects {name: ""} into theText after the .map block. So it seems the contents of the left part of the display drive the height of the app window...

[johnlindquist]

Correct, the items in the list control the height when using arg. Sorry if that wasn't clear from my answer. By css I meant that you would have to style the contents to dynamically fit inside the preview container.

Fwiw,

let padding = ["", "", ""]

and

let padding = [{name: ""},{name: ""},{name: ""}]

Should be equivalent. (Please let me know if they're not)

[cfritze64]

confirmed. they're equivalent. thanks again