logo
Скопировано!

Формулы, наработки, подсказки и советы для No-Code платформы Creatium

Формулы и их обьяснение | Скрипты | Лайфхаки | JS код | и многое другое

Напишите мне в Телеграм и сделаем вам уникальную систему :)

Написать

Напишите мне в Телеграм и сделаем вам уникальную систему :)

Написать

Выделяем цветом определённые блоки, с помощью БД

Применение

Выделить оплаченное размещение;

Сделать определённую группу товаров/услуг/блоков уникальными

Формула

let({status:table.current.f3 },
if(status == "Выделение", "#ae93ff", "#ffffff"))

Объяснение

if(status == "Выделение", "#ae93ff", "#ffffff"))

"Выделение" - это должна быть ваша переменная из БД
"#ae93ff" - это цвет при выделении
"#ffffff" - это цвет обычный
RGB - не работает, только HEX

status:table.current.f3 - ниже показано как его найти у себя на странице

Вопросы по поводу формулы, задавайте автору

batvai

Форматирование даты "Завтра, Сегодня, Вчера"

Применение

Надпись с датой публикации "Сегодня в 15:23"

Дата изменения "Вчера в 22:15"

Формула

let ({
 date: toDate(var1),
 day: 24*60*60*1000,
 today: now(),
 dif: (toNumber(date) - toNumber(today)),
 daysSince: floor(dif/day)
 
}, if (daysSince == 0, "Сегодня в " & substr(date, 11,5),
if (daysSince == -1, "Вчера в " & substr(date, 11,5),
if (daysSince == 1, "Завтра в " & substr(date, 11,5),
substr(date, 8, 2) & "." & substr(date, 5, 2) & "." & substr(date, 0, 4) & " " & substr(date, 11,5))
)))

Объяснение

Где "var1" - это ваша дата в формате "2023-02-23 12:15"

Если у вас дата находится в БД, используйте table.current.f2 вместо var1, где f2 - это номер столбца (см. ниже)

Вопросы по поводу формулы, задавайте автору

batvai

Сохраняем значения полей после отправки формы

Применение

После отправки формы страница не перезагружается и нужно сохранить ранее вписанные значения в полях

Формула

var form = page.getComponent(el);
var originalValues = {};

form.on('before-submit', function(event) {
  form.fields.forEach(function(field) {
    if (field && field.name != 'Название поля') {
      originalValues[field.name] = field.value;
    }
  });
});

form.on('submit', function(event) {
  form.fields.forEach(function(field) {
    if (originalValues) {
      field.setValue(originalValues[field.name]);
    }
  });
});

Объяснение

Код вставлять в форму и названия у полей должны быть разные!

&& field.name != 'Название поля' - вот так можно ограничить поля в которых не нужно сохранять данные 

if (field) - либо делаем так и сохраняем все поля

Вопросы по поводу формулы, задавайте автору

batvai

Плавная прокрутка страницы

Применение

Делает страницу более приятней для прокрутки, добавляет инерции и плавности при скролле

Код перед </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.5.1/SmoothScroll.min.js"></script>
<script>
  SmoothScroll({
    animationTime    : 400, // Длительность анимации, ms
    stepSize         : 100, // Высота, px

    accelerationDelta : 200, // Ускорение, px
    accelerationMax   : 1,
   
    keyboardSupport   : true,
    arrowScroll       : 50, //Высота скролла клавишами, px

    touchpadSupport   : true, // Тачпад
    fixedBackground   : true, // Фиксация фона
  })
</script>

Объяснение

Когда вы нажимаете клавиши или прокручиваете колёсиком, плагин перехватывает эти действия и плавно перемещает страницу к новому положению, используя заданные настройки. Таким образом, вместо резкого перемещения вы получаете плавный переход.

После настройки плагина, удалите комментарии, что бы не оставлять мусор в исходном коде сайта

Вопросы по поводу формулы, задавайте автору

batvai

Убираем дёрганье при открытии модальных окон

Применение

Плавно открывает окно и так же его закрывает

Проверить
Код перед </head>

html,
body {
  scrollbar-gutter: stable;
}

Объяснение

Свойство устанавливает пространство для прокрутки (скролл-бара) в элементе, даже если он скрыт, тем самым предотвращая "скачки" контента на страницах

Вопросы по поводу формулы, задавайте автору

batvai

Скрытие и поднятие элемента по нажатию кнопки

Применение

Сменить элемент по нажатию;

Показать / Убрать элемент по нажатию;

JS код в действие кнопки

$(".var1").removeClass('hide');
$(".var2").addClass('hide');

Демо 1
Демо 2
Да!
Объяснение

"var1" и "var2- это классы элементов;

var1 hide (Первый класс скрытого элемента);

var2 (Класс второго элемента), это классы (по капельке) в секции/кнопке/блоке и т.д.

Переводится это так:

- Убери hide с var1 и мы не будем стрелять! 

- И другану своему скажи спрятаться, ибо hide ему мы уже повесили

Вопросы по поводу формулы, задавайте автору

batvai

Кастомный scrollbar (прокрутка справа) на сайт

Плагин "Код перед </head>"

<style>
/* Прокрутка */
/* Для вертикальных полос прокрутки */
::-webkit-scrollbar {
    width: 10px;
}

/* Фон полосы прокрутки */
::-webkit-scrollbar-track {
    background: none;
    margin: 10px;
}

/* Тумблер */
::-webkit-scrollbar-thumb {
    background-color: rgba(95, 96, 103, 0.3);
    border-radius: 15px;
}
</style>

Так же можно и спрятать (прокрутка работать будет) scrollbar, вставлять в  "Код перед </head>"

<style>
::-webkit-scrollbar {
    width: 0px;
}
</style>

Объяснение

"width"  - ширина полосы прокрутки;

"margin"  - отступы сверху и снизу;

"background"  - цвет полосы под тумблер;

"background-color"  - цвет тумблера;

"border-radius"  - скругления тумблера;

UPD: Чтобы указать прозрачность для элемента, используйте "rgba(95, 96, 103, 0.3)",

0.3 - это 30% от указаного цвета

Вопросы по поводу формулы, задавайте автору

batvai

Перемещение к якорю, при загрузке страницы

Применение

Когда вы открываете каталог, якорь будет опускать вас к каталогу, тем самым скрывая шапку или другую ненужную информацию

Плагин "Код перед </body>"

<script>
window.addEventListener('load', function() {
  setTimeout(function() {
    var element = document.getElementById("catalog");
    if (element) {
      $('html, body').animate({
        scrollTop: $(element).offset().top,
        duration: 1500
      });
    }
  }, 0);
});
</script>

Объяснение

"catalog"  - id вашего якоря

Вопросы по поводу формулы, задавайте автору

batvai

Месяцы прописью

Применение

Преобразования числового значения месяца в текстовое представление, например, "январь", "февраль" и т.д.

Формула

let({
 monthr:  let({
  format: 'MONTH',
  date: now(var1),
}, let({ dateStr: toString(toDate(date)) }, reduce([
  ['YEAR', substr(dateStr, 0, 4)],
  ['MONTH', substr(dateStr, 5, 2)],
  ['DAY', substr(dateStr, 8, 2)],
  ['HOUR', substr(dateStr, 11, 2)],
  ['MINUTE', substr(dateStr, 14, 2)],
  ['SECOND', substr(dateStr, 17, 2)],
], replace(value, item[0], item[1]),

format
)))},

if(monthr == "01", "января",
if(monthr == "02", "февраля",
if(monthr == "03", "марта",
if(monthr == "04", "апреля",
if(monthr == "05", "мая",
if(monthr == "06", "июня",
if(monthr == "07", "июля",
if(monthr == "08", "августа",
if(monthr == "09", "сентября",
if(monthr == "10", "октября",
if(monthr == "11", "ноября", "декабря"))))))))))))

Объяснение

Где "var1" - это ваша дата в формате "2023-02-23"

Для этой формулы должен быть указан формат «MONTH», чтобы преобразовать дату в текстовое представление месяца. Например, указание формата «MONTH» приведет к преобразованию даты «2020-01-01» в строку «январь».

Если у вас дата находится в БД, используйте table.current.f2 вместо var1, где f2 - это номер столбца (см. ниже)


Вопросы по поводу формулы, задавайте автору

Роман Лихтин

Форматирование даты в формат Unix Date

Применение

Данная формула позволяет преобразовать строку даты в числовое значение, которое может быть использовано для дальнейших операций или сравнений с другими датами

Формула 1
Формат ДД.ММ.ГГГГ

let({
dueDate: var1,
dateSplit: split(dueDate, ' '),
dateDay: join(reverse(split(dateSplit[0], ".")), "-"),
date: toNumber(toDate(dateDay)),
},
date
)

Формула 2
Формат ДД.ММ.ГГГГ ЧЧ:ММ

let({
dueDate: var2,
dateSplit: split(dueDate, ' '),
dateDay: join(reverse(split(dateSplit[0], ".")), "-"),
dateTime: dateSplit[1],
date: toNumber(toDate(dateDay & ' ' & dateTime)),
},
date
)

Формула 3
Формат ГГГГ-ММ-ДД ЧЧ:ММ

let({
dueDate:  var3,
separ: "-", //Разделитель
dateSplit: split(dueDate, ' '),
dateDay:  join(split(dateSplit[0], separ), "-"),
dateTime: dateSplit[1],
date: dateDay & ' ' & dateTime,
unix:toNumber(toDate(date)),
},
unix
)

Объяснение

Где var1 - это ваша дата в формате "10.01.2023"

Где var2 - это ваша дата в формате "10.01.2023 10:30"

Где var3 - это ваша дата в формате "2023-01-10 10:30"

Эта формула используется для преобразования даты в число. Она состоит из следующих шагов:

  • Разбивание даты на две части с помощью функции split(
  • Переворот части даты с помощью функции reverse()
  • Соединение перевернутой части даты с помощью функции join()
  • Преобразование даты в число с помощью функции toNumber()
  • Преобразование строки даты в дату с помощью функции toDate()

Если у вас дата находится в БД, используйте table.current.f2 вместо var, где f2 - это номер столбца (см. ниже)

Вопросы по поводу формулы, задавайте мне

batvai

Автор формулы

Дмитрий Соловей

Расчет разницы между датой и сегодняшним числом с выводом в виде “Х лет Х месяцев Х дней”

Применение

Например, пусть первый рабочий день был 1 января, а текущий день - 15 февраля. Формула рассчитает, что прошло "1 год 1 месяц 14 дней" и покажет это

Формула

if(table.current.firstWorkDay == null, "Не указан
первый рабочий день",

let({
  first: table.current.firstWorkDay,
  firstdate: toDate(first),
  today: toNumber(now()),
  total:  today - first,
  y: total / 31556926000,
  m: (total / 2629743000) - (floor(y) * 12),
  d: if((total / 86400000 / 365.24) < 1, total / 86400000, (total / 86400000 / 365.24)),
  cury: floor(y),
  curm: floor(m),
  curd: floor(d),
  ywords: ['год', 'года', 'лет'],
  mwords: ['месяц', 'месяца', 'месяцев'],
  dwords: ['день', 'дня', 'дней'],
  years: cury & ' ' & ywords[if(
  cury % 100 > 4 and cury % 100 < 20,
  2, [2, 0, 1, 1, 1, 2][if(cury % 10 > 5, 5, cury % 10)]
)],
  month: curm & ' ' & mwords[if(
  curm % 100 > 4 and curm % 100 < 20,
  2, [2, 0, 1, 1, 1, 2][if(curm % 10 > 5, 5, curm % 10)]
)],
  days: curd & ' ' & dwords[if(
  curd % 100 > 4 and curd % 100 < 20,
  2, [2, 0, 1, 1, 1, 2][if(curd % 10 > 5, 5, curd % 10)]
)],
},
if(cury <= 0, "", years)  
& " " &
if(curm <= 0, "", month)
& " " &
if(curd <= 0, "меньше одного дня", days)
)

)

Объяснение

Где "table.current.firstWorkDay" - это ваша дата в UNIX формате из БД

  • Сначала формула проверяет, есть ли у нас первый рабочий день. Если нет, то выводим сообщение "Не указан первый рабочий день";
  • Если первый рабочий день есть, мы превращаем его и текущий день в числа и считаем разницу между ними в миллисекундах. Затем превращаем эту разницу в годы, месяцы и дни;
  • Когда у нас уже есть года, месяцы и дни, она их округляет до целых чисел. Затем выбирает правильные слова для описания лет (год/года), месяцев (месяц/месяца) и дней (день/дня);

Вопросы по поводу формулы, задавайте автору

Дмитрий Соловей

Генератор паролей

Применение

Генерирует случайный пароль..

Например, результат может быть "xN34$Q7Rz".

Формула

let({
  array:
["A", "B", "C", "D", "E", "F", "G", "H", "I",
"K", "L", "M", "N", "O", "P", "Q", "R", "S",
"T", "V", "X", "Y", "Z", "a", "b", "c", "d",
"e", "f", "g", "h", "i", "k", "l", "m", "n",
"o", "p", "q", "r", "s", "t", "v", "x", "y",
"z", "1", "2", "3", "4", "5", "6", "7", "8",
"9", "0", "_", "$", "@", "%", "&", "~"],
  pass: map(
  sort(map(array, [item, random()]), item[1]),
  item[0]
)                    
},
join(slice(pass, 0, 9 ), "")
)

Объяснение

Количество символов можно регулировать изменяя число в "slice"

Вопросы по поводу формулы, задавайте автору

Дмитрий Соловей

Обрезание текста по длине

Применение

Обрезать текст из переменной до определенного количества символов, например, чтобы он не растягивал блок

Формула

let({
  text: 'var1',
  length: 20,
}, if(
  length(text) > length,
  substr(text, 0, length) & '…',
  text
))

Объяснение

"var1" - это ваш текст;

"length" - это до куда обрезать

Либо через таблицу с данными "text: member.f5," и тому подобные, см. ниже

Вопросы по поводу формулы, задавайте автору

Creatium

Склонение существительного после числа

Применение

Например, если значение переменной "count" равно 22, формула вернет фразу "22 дня" / "111 дней" / "1 день".

Точно так же можно поступать с любым словом, будь то отзывы или картошка.

Формула

let({
count: var1,
words: ['день', 'дня', 'дней'],
}, count & ' ' & words[if(
count % 100 > 4 and count % 100 < 20,
2, [2, 0, 1, 1, 1, 2][if(count % 10 > 5, 5, count % 10)]
)])

Объяснение

"var1" - это ваше число

Если у вас дата находится в БД, используйте table.current.f2 вместо var1, где f2 - это номер столбца (см. ниже)

Вопросы по поводу формулы, задавайте автору

Creatium

Округление до тысяч, миллионов и т.д.

Применение

Например, если значение переменной "bytes" равно 435478876, формула вернет "435 млн", если равно 5000, формула вернет строку "5 тыс." и т.д.

Формула

let({
  bytes: var1,
  units: [' тыс.', ' млн.', ' млрд.', ' трлн.'],
  precision: 0,
  zero: '0',
}, if(bytes == 0, zero, let({
  e: min([floor(log(bytes, 1000)), 4])
}, round(bytes / pow(1000, e), precision) & if (e > 0, units[e - 1], ''))))

Объяснение

"var1" - это ваше число

Если у вас дата находится в БД, используйте table.current.f2 вместо var1, где f2 - это номер столбца (см. ниже)

Вопросы по поводу формулы, задавайте автору

Creatium

Форматирование чисел

Применение

Например, если значение переменной "number" равно 1233445, формула вернет строку "1 233 445"

Формула

let({
  number: var1,
  delimiter: ' ',
}, let({ str: toString(number) }, trimStart(join(map(
  range(0, length(str)),
  if((length(str) - item) % 3 == 0, delimiter, '') & substr(str, item, 1)
)))))

Объяснение

"var1" - это ваше число

Если у вас дата находится в БД, используйте например, table.current.f2 вместо var1, где f2 - это номер столбца (см. ниже)

Вопросы по поводу формулы, задавайте автору

Creatium

Определения дня недели на основе заданной даты

Применение

Для автоматического определения дня недели для заданной даты и может использоваться например, при создании календарей, планировщиков или расписаний.

Формула

let({
 input: now(),
 date: toString(input),
 date2: split(date, "T")[0],
 array: split(date2, "-"),
 year: toNumber(array[0]),
 yearLastDig: toNumber(substr(array[0], 2)),
 yearCode: (yearLastDig + floor(yearLastDig / 4)) % 7,
 month: toNumber(array[1]),
 day: toNumber(array[2]),
 monthCode:
 if(
   month == 1, 0,
   month == 2, 3,
   month == 3, 3,
   month == 4, 6,
   month == 5, 1,
   month == 6, 4,
   month == 7, 6,
   month == 8, 2,
   month == 9, 5,
   month == 10, 0,
   month == 11, 3,
   month == 12, 5,
   0),
   century: floor(year / 100),
  centuryCode:
  if(
   century == 17, 4,
   century == 18, 2,
   century == 19, 0,
   century == 20, 6,
   century == 21, 4,
   century == 22, 2,
   century == 23, 0,
  0),
  leapYear:
     if (year / 4 == 400, true,
         year / 4 == 100, false,
         year / 4 == 0, true, false),
  offset:
     if (leapYear and month == 1, -1,
     leapYear and month == 2, -1, 0),
  total: (offset + yearCode + monthCode + centuryCode + day) % 7,

   }, if (total == 0, "Воскресенье",
         total == 1, "Понедельник",
         total == 2, "Вторник",
         total == 3, "Среда",
         total == 4, "Четверг",
         total == 5, "Пятница",
         total == 6, "Суббота","Ошибка")
)

Объяснение

Формула расчитана на даты после 1700 года 

Она разбивает введенную дату на отдельные компоненты (год, месяц, день), вычисляет коды для каждой из этих компонент и выполняет некоторые математические операции, чтобы определить общий код дня недели (от 0 до 6).

Полученное значение кода дня недели соответствует следующим дням недели: 0 - Воскресенье 1 - Понедельник 2 - Вторник 3 - Среда 4 - Четверг 5 - Пятница 6 - Суббота

"now()" - любую дата в кавычках например "1995-10-28"

Если у вас дата находится в БД, используйте например, table.current.f2 вместо now(), где f2 - это номер столбца (см. ниже)

Вопросы по поводу формулы, задавайте автору

Creatium

Поиск значений "от" - "до" в текстов фильтре

Применение

Если в фильре есть выпадающий список значений и он записывается в адресную строку в виде "from+86m+to+135m"

То его данная формула преобразует в конечное число.

Это полезно, когда в адресной строке могут быть разные значения, такие как "from 10m", "from 10m to 20m" или "to 20m".

Формула
Формат ДД.ММ.ГГГГ

let({
  arr: split(url.params.length?, '+'),
  from: indexOf(arr, "from"),
  to: indexOf(arr, "to"),
},
if(to != -1,
toNumber(replaceAll(arr[to+1],'m','')), 0)
)

Зачем это делать?

В базе данных храниться числовое значение конкретной длины, то есть работаем мы с числами, и в фильтре набора блоков будем показывать через "Больше или равно" и "Меньше или равно".

При этом если сделать вторую переменную с такой же формулой, но в последней строке поменять на from, то можно будет гибко работать с адресной строкой, в которой могут быть разные значения:
from 10m
from 10m to 20m
to 20m

Вопросы по поводу формулы, задавайте автору

Дмитрий Соловей

Расчет разницы между датой и сегодняшним числом с выводом в виде “Х лет Х месяцев Х дней”

Применение

Есть список тех, кого вы позвали на ДР — a1

И список всех друзей — a3
Данная формула покажет кого из списка своих друзей не позвали на ДР.

Формула

a1 = [122,123,124]; // то что есть в исходном массиве
a3 = [122,123,124,125,126,127]; // то что есть в общем списке

letindex = map(a3, {userid: item, index: a1[indexOf(a1,item)]});
fil = filter(letindex, item.userid != item.index);
result = join(map(fil, item.userid),',');
result //результат

Объяснение

Где "table.current.firstWorkDay" - это ваша дата в UNIX формате из БД

  • Мы используем функцию map, чтобы пройтись по каждому элементу массива a3;
  • Для каждого элемента создаем объект с двумя свойствами: userid и index;
  • Значение userid берется из элемента массива a3, а index - это индекс элемента a3 в массиве a1;
  • Далее, используем функцию filter, чтобы отфильтровать только те объекты, у которых userid и index неравны друг другу;
  • И наконец, мы преобразуем каждый объект в новый массив, беря только значение userid;
  • В итоге мы соединяем все значения в новом массиве, разделяя их запятой.

Если у вас дата находится в БД, используйте например, table.current.f2 вместо [122,123,124], где f2 - это номер столбца (см. ниже), то же самое и с [122,123,124,125,126,127]

Вопросы по поводу формулы, задавайте автору

Роман Лихтин
Разработка
Компоненты
Формулы
Ютубчик
ТГ- Канал